/* ==========================================================================
   Draft Page Specific Styles - Draft Interface & Tables
   ========================================================================== */

/* ==========================================================================
   LAYOUT & BACKGROUND
   ========================================================================== */
.landing-body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
  color: var(--text-color);
}

.bg-layer {
  position: fixed;
  inset: 0;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(13, 110, 253, 0.25), transparent 60%),
              radial-gradient(800px 400px at 10% 110%, rgba(13, 110, 253, 0.15), transparent 60%),
              linear-gradient(180deg, #f9fbff 0%, #f6f8fc 30%, #f8fafc 100%);
  filter: saturate(110%);
  z-index: -1;
}

.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
}

.brand-logo {
  height: 40px;
  width: auto;
}

.brand-link {
  text-decoration: none;
}

.top-nav {
  display: flex;
  gap: 22px;
}

.nav-link {
  text-decoration: none;
  color: rgba(0,0,0,0.7);
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.nav-link:hover { 
  color: var(--primary-color);
  background: rgba(13, 110, 253, 0.08);
}

/* Button styling for nav items that trigger overlays */
.nav-button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

.nav-button:hover {
  color: var(--primary-color);
  background: rgba(13, 110, 253, 0.08);
}

.nav-button:focus {
  outline: none;
  color: var(--primary-color);
  background: rgba(13, 110, 253, 0.08);
}

/* Disabled state for header nav buttons */
.nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.landing-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 16px;
  color: rgba(0,0,0,0.5);
  font-size: 13px;
}

/* Section title styling to match front page */
.section-title {
  display: block;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.2;
  margin: 0 auto;
  width: 100%;
  background: linear-gradient(135deg, var(--primary-color), var(--info-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 6px rgba(13, 110, 253, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-title::after {
  content: "";
  display: block;
  height: 3px;
  width: 72px;
  margin: 0px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(13,110,253,0), rgba(13,110,253,0.6), rgba(13,110,253,0));
}

/* Draft Room Title Container with Share Button */
.draft-room-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px auto 0px auto;
  width: 100%;
  max-width: 1400px;
  position: relative;
  z-index: calc(var(--z-index-floating-elements) + 1);
}

.title-with-share {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-right-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Follow Team Card Overlay - positioned like edit draft overlay for identical backdrop */
.follow-team-card-overlay {
  position: fixed;
  top: 120px;
  right: 20px;
  z-index: var(--z-index-floating-windows);
  pointer-events: auto;
}

.follow-team-card {
  padding: 12px 20px;
  min-width: 280px;
  max-width: 320px;
  cursor: move; /* Match edit-draft-controls exactly */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.follow-team-card:hover {
  box-shadow: 
    0 12px 40px rgba(13, 110, 253, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.follow-team-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  position: relative;
}

.follow-team-title {
  font-weight: 700;
  font-size: 0.9em;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 2;
}

/* Remove all special drag styling to match edit-draft-controls exactly */
.follow-team-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.follow-team-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.follow-team-next-pick,
.follow-team-last-pick {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.follow-next-pick-text {
  /* Avoid nested em scaling. Keep container at base size; style the label/value individually */
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.follow-next-pick-text .follow-value {
  color: var(--primary-color);
  font-weight: 700;
}

.follow-right-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.follow-countdown {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.4;
  display: inline;
}

.follow-label {
  font-size: 0.8em;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.4;
}

.follow-value {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.4;
  text-align: right;
}

/* Specific font-size overrides for follow elements */
#follow-next-pick {
  font-size: 0.8em;
}

#follow-countdown-timer {
  font-size: 0.8em;
}

.follow-salary-cap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.follow-cap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.follow-cap-value {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.4;
  text-align: right;
}

.follow-cap-bar-container {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 6px;
  overflow: hidden;
}

.follow-cap-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--primary-hover-color));
  border-radius: 6px;
  transition: width 0.3s ease;
  width: 0%;
}

/* Share Button */
.share-button {
  background: rgba(13, 110, 253, 0.1);
  border: 2px solid rgba(13, 110, 253, 0.2);
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--primary-color);
  transition: all 0.3s ease;
  position: relative;
}

.share-button:hover {
  background: rgba(13, 110, 253, 0.15);
  border-color: rgba(13, 110, 253, 0.4);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}

.share-button:active {
  transform: scale(0.95);
}

.share-button svg {
  transition: transform 0.2s ease;
}

.share-button:hover svg {
  transform: scale(1.1);
}

@media (min-width: 900px) {
  .landing-header { 
    padding: 28px 44px; 
  }
  .brand-logo { 
    height: 52px; 
  }
  .top-nav { 
    gap: 28px; 
  }
}

/* ==========================================================================
   Main Draft Area Header & Controls
   ========================================================================== */

.draft-header {
  margin-bottom: 0;
  position: relative; /* Context for settings button */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Draft status container - full width below the title */
.draft-status-wrapper {
  position: relative;
  width: 100%;
  margin: var(--spacing-lg) var(--spacing-md) var(--spacing-sm);
}

 .draft-status-container {
   width: calc(100% - 2 * var(--spacing-md));
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
   gap: var(--spacing-sm);
   margin: 0 var(--spacing-md);
   box-sizing: border-box;
   padding: var(--spacing-md) var(--spacing-md);
   background: rgba(255, 255, 255, 0.6);
   border-radius: 16px;
   box-shadow: 0 8px 22px rgba(13, 110, 253, 0.08), 0 2px 10px rgba(0, 0, 0, 0.06);
   backdrop-filter: blur(18px) saturate(120%);
   -webkit-backdrop-filter: blur(18px) saturate(120%);
   position: relative;
   z-index: var(--z-index-floating-elements);
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   scroll-snap-type: x mandatory;
 }

 /* Hide native horizontal scrollbar while preserving scroll */
 .draft-status-container::-webkit-scrollbar { 
  display: none; 
}

 .draft-status-container { 
  scrollbar-width: none; 
  -ms-overflow-style: none; 
}
 
 .status-group { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
}

 .status-label {
   font-size: 1rem;
   font-weight: 800;
   letter-spacing: 0.2px;
   background: linear-gradient(135deg, var(--primary-color), var(--info-color));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-shadow:
     0 0 6px rgba(13, 110, 253, 0.15),
     0 2px 8px rgba(0, 0, 0, 0.06);
 }

/* Reddish style for the "Ongoing round" label only (subtle, not flashy) */
.status-card--round .status-label {
  background: linear-gradient(135deg, var(--danger-hover-color), var(--danger-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 6px rgba(220, 53, 69, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Card containers for each status piece */
.status-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06) inset, 0 2px 10px rgba(0,0,0,0.04);
  background: #fff;
}

/* Ensure all status cards align to same baseline and height feels consistent */
.draft-status-container .status-card {
  min-height: 54px;
  scroll-snap-align: none;
  flex: 0 0 auto; /* Prevent shrinking so items keep natural width */
}

/* Provide subtle drag handles at the left/right edges of each status card.
   Shows a 4-way arrow cursor near borders to indicate the cards are draggable. */
.draft-status-container .status-card { position: relative; cursor: move; }
.draft-status-container .status-card::before,
.draft-status-container .status-card::after {
  content: "";
  position: absolute;
  top: 0;
  width: 24px; /* wider draggable handle width */
  height: 100%;
  background: transparent; /* invisible handle area */
  cursor: move; /* 4-way arrow */
  pointer-events: auto; /* ensure handle captures pointer */
}
.draft-status-container .status-card::before { left: 0; }
.draft-status-container .status-card::after { right: 0; }

.status-card--round {
  border-color: rgba(220, 53, 69, 0.35);
  background: linear-gradient(180deg, rgba(255, 241, 242, 0.9), rgba(255, 250, 250, 0.95));
}

.status-card--team {
  border-color: rgba(13, 110, 253, 0.35);
  background: linear-gradient(180deg, rgba(240, 248, 255, 0.9), rgba(248, 251, 255, 0.95));
}

/* Purple-themed last pick card */
.status-card--last-pick {
  border-color: rgba(111, 66, 193, 0.35); /* bootstrap-ish purple */
  background: linear-gradient(180deg, rgba(245, 238, 255, 0.9), rgba(251, 248, 255, 0.95));
}

/* Purple gradient text for the Last pick label (matching style of others) */
.status-card--last-pick .status-label {
  background: linear-gradient(135deg, rgba(147,112,219,1), rgba(111,66,193,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 6px rgba(147, 112, 219, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.06);
}



/* Match inner pill border to red theme for ongoing round */
.status-card--round #round-counter,
.status-card--round .status-pill {
  border-color: rgba(220, 53, 69, 0.25);
}

/* Match inner pill border to blue theme for next team */
.status-card--team #turn-counter,
.status-card--team .status-pill,
.status-card--team .status-team {
  border-color: rgba(13,110,253,0.25);
}

/* Match inner pill border to green theme for timer (only when not expired) */
.status-card--timer #round-timer-display:not(.danger),
.status-card--timer .status-pill:not(.danger),
.status-card--timer .round-timer-display:not(.danger) {
  border-color: rgba(25,135,84,0.25);
}

/* Match inner pill border to purple theme for last pick */
.status-card--last-pick #last-pick-counter,
.status-card--last-pick .status-pill {
  border-color: rgba(111,66,193,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 8px rgba(111,66,193,0.06);
}

/* Inline logo in last-pick pill */
.status-pill .status-pill-logo {
  height: 24px;
  width: auto;
  margin-right: 2px;
  vertical-align: middle;
}

/* Smaller logo for follow team card */
.follow-team-logo {
  height: 20px;
  width: auto;
  margin-right: 4px;
  vertical-align: middle;
  transform: translateY(-2px);
}

/* Green-themed timer card */
.status-card--timer {
  border-color: rgba(25, 135, 84, 0.35); /* bootstrap-ish success */
  background: linear-gradient(180deg, rgba(240, 255, 244, 0.9), rgba(248, 255, 250, 0.95));
}

.status-card--timer .status-label {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--success-color);
  text-shadow: none;
}

/* Make timer pill styling lean green inside the timer card */
.status-card--timer .round-timer-display {
  /* border-color set above conditionally */
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,255,244,0.85));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 8px rgba(25,135,84,0.06);
  padding: 12px 16px; /* match other status pills */
  font-size: 1.1em;   /* match other status pills */
  margin-left: 0;     /* rely on .status-card gap for spacing */
}

/* Keep timer controls tight so the card height matches the others */
.status-card--timer .timer-controls {
  margin-left: 0;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}

/* Small plus trigger next to timer pill */
.timer-add-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: -4px;
  border: none;
  background: transparent;
  color: var(--success-color);
  font-weight: 800;
  line-height: 0;
  cursor: pointer;
  box-shadow: none;
  transform: translateY(-2px);
}

.timer-add-trigger:hover {
  background: transparent;
  color: var(--success-dark, #1e7e34);
}

/* Wrapper to anchor the add-time menu relative to the + button */
.timer-add-wrapper {
  position: relative;
  display: inline-block;
}

/* Timer add-time select dropdown */
.timer-add-select {
  width: fit-content;
  min-width: 84px;
  max-width: 140px;
  padding: 7px 11px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 1em;
  background-color: rgba(255,255,255,0.9);
  color: var(--text-color);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  margin-left: 8px;
}

.timer-add-select:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

.timer-add-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
  background-color: #fff;
}

/* Mobile responsive adjustments for draft status container */
@media (max-width: 768px) {
  .draft-status-wrapper {
    margin: var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
  }
  
  .draft-status-container {
    width: 90%;
    margin: 0 5%;
    flex-direction: row; /* Keep ribbon in a single row */
    flex-wrap: nowrap;
    overflow-x: auto; /* Allow horizontal scroll on small screens */
    overflow-y: hidden;
    gap: var(--spacing-sm);
    box-sizing: border-box;
    padding: var(--spacing-sm) var(--spacing-sm);
    -webkit-overflow-scrolling: touch;
  }
  .status-scroll-btn {
    width: 32px;
    height: 32px;
  }

  /* Mobile adjustments for header and follow card */
  .draft-room-title-container {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    position: relative; /* keep positioned so child z-index works */
  }

  .title-with-share {
    width: 100%;
    justify-content: center;
  }

  .header-right-section {
    width: 100%;
    justify-content: center;
    position: static;
    transform: none;
  }

  .follow-team-card-overlay {
    top: 100px;
    right: 12px;
  }

  .follow-team-card {
    min-width: auto;
    max-width: 280px;
    width: calc(100vw - 24px);
  }

  .follow-team-content {
    gap: 8px;
  }

  .follow-team-info {
    gap: 8px;
  }

  .follow-label,
  .follow-value,
  .follow-cap-value,
  .follow-next-pick-text,
  .follow-countdown {
    font-size: 0.75em;
    line-height: 1.4;
  }

  #follow-next-pick {
    font-size: 0.75em;
  }

  #follow-countdown-timer {
    font-size: 0.75em;
  }

  .follow-team-title {
    font-size: 0.8em;
    line-height: 1.4;
  }

  .draft-status-container .timer-controls {
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
  }
 
  .status-group { 
    justify-content: flex-start; 
  }
}

.room-code-display {
  display: none; /* Hidden by default, shown by JS */
  margin-left: var(--spacing-md);
  font-size: 0.8em;
  background-color: var(--border-color-light);
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
  font-weight: normal;
  white-space: nowrap;
}

#round-counter,
#turn-counter,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1em;
  font-weight: 800;
  color: rgba(0,0,0,0.92);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.5));
  padding: 12px 16px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(13,110,253,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 8px rgba(13,110,253,0.06);
}

#round-counter { color: var(--text-color); }

.status-team {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,248,255,0.7));
  border-color: rgba(42,106,168,0.25);
  color: var(--primary-color);
}

/* Explicit states for team pill */
.status-team.waiting {
  background: var(--waiting-bg) !important;
  color: var(--waiting-text) !important;
  border-color: #ffeaa7 !important;
}

.status-team.full {
  background: var(--full-bg) !important;
  color: var(--full-text) !important;
  border-color: #b9e1c7 !important;
}

#turn-counter.waiting {
  background-color: var(--waiting-bg);
  color: var(--waiting-text);
}

.round-timer-display {
  font-size: 0.95em;
  font-weight: 800;
  color: var(--text-color);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,244,255,0.85));
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
  margin-left: var(--spacing-sm);
  border: 1px solid rgba(13,110,253,0.25);
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.round-timer-display.warning {
  background-color: #fff3cd;
  color: #664d03;
  border-color: #ffeaa7;
}

.round-timer-display.danger {
  background-color: #f8d7da;
  color: #842029;
  border-color: #f5c6cb;
  animation: dangerPulseGlow 1s infinite;
}

/* Make the + icon red when the timer is in danger (flashing red) */
.round-timer-display.danger .timer-add-trigger,
.round-timer-display.danger .timer-add-trigger:hover {
  color: inherit;
}

/* Prevent dropdown elements from inheriting the pulse animation */
.round-timer-display.danger .timer-add-select,
.round-timer-display.danger .timer-add-menu-item,
.round-timer-display.danger .timer-add-button {
  animation: none !important;
  transform: none !important;
}

/* Prevent timer menu from inheriting pulse animation but allow positioning */
.round-timer-display.danger .timer-add-menu,
#add-time-menu,
#add-time-menu.timer-add-menu,
.danger #add-time-menu {
  animation: none !important;
}

.round-timer-display.paused {
  background-color: #e2e3e5;
  color: #495057;
  border-color: #adb5bd;
  animation: pausedPulse 2s infinite;
}

@keyframes dangerPulseGlow {
  0% {
    box-shadow: 0 0 0 rgba(220, 53, 69, 0.0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(220, 53, 69, 0.18);
  }
  100% {
    box-shadow: 0 0 0 rgba(220, 53, 69, 0.0);
  }
}

@keyframes pausedPulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

#turn-counter.full {
  background-color: var(--full-bg);
  color: var(--full-text);
}

.draft-controls {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: var(--spacing-md);
  width: 100%;
  box-sizing: border-box;
  gap: var(--spacing-sm); /* Use gap instead of margin */
}

/* Apply base button styles and specific overrides */
.draft-controls button {
  padding: 6px 12px;
  font-size: 1rem;
  /* Inherits .btn styles via HTML class */
}

.draft-controls button:disabled {
  /* Inherits .btn:disabled styles */
  opacity: 0.6; /* Slightly different opacity if needed */
}



/* ==========================================================================
   Locked Table Display Overlay
   ========================================================================== */

/* --- Base Structure & Appearance (Maximized) --- */
.overlay.locked-table-display-overlay {
  background-color: transparent;
  padding: 120px 20px 20px 20px;
  justify-content: flex-start;
  z-index: var(--z-index-floating-windows);
  pointer-events: none;
  align-items: flex-start;
}

.locked-table-display-overlay .overlay-content {
  background: rgba(255, 255, 255, 0.8);
  padding: 16px;
  border-radius: 32px 12px 32px 32px;
  box-shadow:
    0 8px 32px rgba(13, 110, 253, 0.15),
    0 2px 16px rgba(0, 0, 0, 0.08);
  max-width: none;
  width: auto;
  min-width: 320px;
  position: relative;
  border: 1px solid rgba(13, 110, 253, 0.2);
  margin-top: 0;
  pointer-events: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover/focus feel consistent with edit overlays */
.locked-table-display-overlay .overlay-content:hover {
  box-shadow:
    0 12px 40px rgba(13, 110, 253, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove accent outline/inner glow from team card when shown in pinned overlay */
.locked-table-display-overlay .team-card--active {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove box shadow from all team cards in locked overlay to prevent grey triangles */
.locked-table-display-overlay .team-card {
  box-shadow: none !important;
}

.locked-table-scrollable-content {
  max-height: calc(100vh - 215px - 20px - (2 * var(--spacing-md)));
  overflow-y: auto;
  overflow-x: auto;
}

.locked-table-display-overlay table {
  margin: 0;
  border: none;
}

/* Ensure team name is left-aligned in pinned overlay */
.locked-table-display-overlay .team-card__name,
.locked-table-display-overlay .team-card__title {
  text-align: left;
}

/* ==========================================================================
   Bottom Tab Bar (Excel-like) - Always Visible
   ========================================================================== */

.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: rgba(255, 255, 255, 0.75);
  border-top: 1px solid rgba(13, 110, 253, 0.15);
  z-index: var(--z-index-bottom-tab-bar);
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  pointer-events: auto;
  box-shadow: 0 -6px 22px rgba(13, 110, 253, 0.08), 0 -2px 10px rgba(0, 0, 0, 0.06);
  gap: 8px;
  padding: 6px 10px;
}

.bottom-tab-bar::-webkit-scrollbar {
  height: 6px;
}

.bottom-tab-bar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.bottom-tab-bar::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.bottom-tab-bar::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.bottom-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  max-width: 200px;
  height: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(240,244,255,0.85));
  border-right: none;
  border-top: none;
  border: 1px solid rgba(13,110,253,0.18);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: all 0.2s ease;
  padding: 0 12px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-color);
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(13, 110, 253, 0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

.bottom-tab:hover {
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(240,244,255,0.95));
  border-color: rgba(13,110,253,0.28);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(13, 110, 253, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bottom-tab.active {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
  border-color: var(--primary-color);
  color: var(--white);
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(13, 110, 253, 0.25), inset 0 1px 0 rgba(255,255,255,0.35);
}

.bottom-tab:first-child {
  border-left: none;
}

.bottom-tab-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}

.bottom-tab-restore {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(13, 110, 253, 0.15);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: opacity 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  font-size: 10px;
  color: var(--primary-color);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(13,110,253,0.12);
}

.bottom-tab:hover .bottom-tab-restore {
  opacity: 1;
}

.bottom-tab .bottom-tab-restore:hover {
  background-color: var(--primary-color);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(13,110,253,0.25);
}

.bottom-tab .bottom-tab-restore svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Placeholder tab when no tables are minimized */
.bottom-tab.placeholder {
  color: var(--text-muted-color);
  font-style: italic;
  cursor: default;
  background: linear-gradient(145deg, rgba(255,255,255,0.6), rgba(240,244,255,0.5));
  border-color: rgba(13,110,253,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

.bottom-tab.placeholder:hover {
  background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(240,244,255,0.6));
  border-color: rgba(13,110,253,0.18);
}

/* Styles for Minimized Locked Table Overlay - Updated for Bottom Tabs */
.overlay.locked-table-display-overlay.minimized {
  display: none !important; /* Hide the overlay completely when minimized */
}

.locked-table-display-overlay.minimized
  .overlay-content.locked-table-overlay-content {
  display: none !important; /* Ensure content is hidden */
}

/* Hide table content, padlock, close button, and caption when minimized */
.locked-table-display-overlay.minimized .locked-table-scrollable-content,
.locked-table-display-overlay.minimized .overlay-close-button {
  display: none !important;
}

/* ==========================================================================
   Main Content Adjustment for Bottom Tab Bar
   ========================================================================== */

/* Ensure main content doesn't get hidden behind the bottom tab bar */
body {
  padding-bottom: 40px; /* Same as bottom-tab-bar height */
}

/* Responsive adjustments for bottom tab bar */
@media (max-width: 768px) {
  .bottom-tab-bar {
    height: 45px; /* Slightly taller on mobile for better touch targets */
  }
  
  .bottom-tab {
    min-width: 100px;
    max-width: 150px;
    font-size: 0.8rem;
    padding: 0 8px;
    height: 32px;
  }
  
  .bottom-tab .tab-close-btn {
    width: 18px;
    height: 18px;
    right: 2px;
  }
  
  body {
    padding-bottom: 45px; /* Match mobile tab bar height */
  }
}

/* Ensure tab bar doesn't interfere with other overlays */
.overlay {
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .overlay {
    margin-bottom: 45px;
  }
}

/* ==========================================================================
   Overlay State Toggle Button (Minimize/Maximize) - Now handled by Pin Button
   ========================================================================== */

/* Pin button in minimized overlay state is hidden since we use tab bar */
.locked-table-display-overlay.minimized .team-card__pin-button {
  display: none !important;
}

/* ==========================================================================
   Player Search Input & Results
   ========================================================================== */
.player-search-input {
  width: 100%;
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  box-sizing: border-box;
  background-color: var(--white);
  color: var(--text-color);
  outline: none;
  outline-offset: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.player-search-input:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

.player-search-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.player-search-input:disabled {
  background-color: var(--input-disabled-bg);
  border-color: var(--input-disabled-border);
  color: var(--input-disabled-text);
  cursor: not-allowed;
  opacity: 0.75;
}

.search-results-container {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid var(--border-color-medium);
  background-color: var(--white);
  z-index: var(--z-index-search-results);
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  text-align: left;
  display: none; /* Explicitly hide, shown via JS */
}

/* Shared styles for old .player-option and new .search-result-item */
.player-option,
.search-result-item {
  padding: 5px 8px;
  cursor: pointer;
  font-size: 0.9em;
}

.player-option:hover,
.search-result-item:hover {
  background-color: var(--border-color-light);
}

.player-option:last-child,
.search-result-item:last-child {
  border-bottom: none;
}

/* Specific styles for search results with logos */
.search-result-item {
  display: flex;
  align-items: center;
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color-light);
  white-space: normal; /* Allow wrapping */
}

/* Position-based subtle background colors for search results */

.search-result-item.pos-F {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pos-f-bg) 26%, #fff) 0%,
    color-mix(in srgb, var(--pos-f-bg) 14%, #fff) 42%,
    #fff 82%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pos-f-bg) 60%, #fff);
}

.search-result-item.pos-D {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pos-d-bg) 26%, #fff) 0%,
    color-mix(in srgb, var(--pos-d-bg) 14%, #fff) 42%,
    #fff 82%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pos-d-bg) 60%, #fff);
}

.search-result-item.pos-G {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pos-g-bg) 32%, #fff) 0%,
    color-mix(in srgb, var(--pos-g-bg) 20%, #fff) 42%,
    #fff 82%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pos-g-bg) 68%, #fff);
}

/* Enhanced hover states for position-colored search results */

.search-result-item.pos-F:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pos-f-bg) 32%, #fff) 0%,
    color-mix(in srgb, var(--pos-f-bg) 18%, #fff) 48%,
    #fff 92%);
}


.search-result-item.pos-D:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pos-d-bg) 32%, #fff) 0%,
    color-mix(in srgb, var(--pos-d-bg) 18%, #fff) 48%,
    #fff 92%);
}


.search-result-item.pos-G:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pos-g-bg) 36%, #fff) 0%,
    color-mix(in srgb, var(--pos-g-bg) 22%, #fff) 48%,
    #fff 92%);
}

/* Position colors for special states - subtle blend with existing backgrounds */
.search-result-item.search-result-item-picked.pos-F,
.search-result-item.search-result-item-picked.pos-D,
.search-result-item.search-result-item-picked.pos-G {
  background: var(--input-disabled-bg);
  box-shadow: none;
  border-color: var(--input-disabled-border);
  color: var(--input-disabled-text);
  cursor: not-allowed;
  opacity: 0.75;
}

.search-result-item.search-result-item-over-cap.pos-F,
.search-result-item.search-result-item-over-cap.pos-D,
.search-result-item.search-result-item-over-cap.pos-G {
  background: var(--input-disabled-bg);
  box-shadow: none;
  border-color: var(--input-disabled-border);
  color: var(--input-disabled-text);
  cursor: not-allowed;
  opacity: 0.75;
}

/* Ensure banned players also override position colors completely */
.search-result-item.search-result-item-banned.pos-F,
.search-result-item.search-result-item-banned.pos-D,
.search-result-item.search-result-item-banned.pos-G,
.search-result-item.search-result-item-banned-player.pos-F,
.search-result-item.search-result-item-banned-player.pos-D,
.search-result-item.search-result-item-banned-player.pos-G {
  background: var(--input-disabled-bg);
  box-shadow: none;
  border-color: var(--input-disabled-border);
  color: var(--input-disabled-text);
  cursor: not-allowed;
  opacity: 0.75;
}

/* Override hover states for disabled/banned players to stay grey */
.search-result-item.search-result-item-picked.pos-F:hover,
.search-result-item.search-result-item-picked.pos-D:hover,
.search-result-item.search-result-item-picked.pos-G:hover,
.search-result-item.search-result-item-over-cap.pos-F:hover,
.search-result-item.search-result-item-over-cap.pos-D:hover,
.search-result-item.search-result-item-over-cap.pos-G:hover,
.search-result-item.search-result-item-banned.pos-F:hover,
.search-result-item.search-result-item-banned.pos-D:hover,
.search-result-item.search-result-item-banned.pos-G:hover,
.search-result-item.search-result-item-banned-player.pos-F:hover,
.search-result-item.search-result-item-banned-player.pos-D:hover,
.search-result-item.search-result-item-banned-player.pos-G:hover {
  background: var(--input-disabled-bg);
  box-shadow: none;
  border-color: var(--input-disabled-border);
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

/* HIGHER SPECIFICITY OVERRIDES for team card search results */
/* Override team card position colors for picked players */
.team-card .player-search-results .search-result-item.search-result-item-picked.pos-F,
.team-card .player-search-results .search-result-item.search-result-item-picked.pos-D,
.team-card .player-search-results .search-result-item.search-result-item-picked.pos-G {
  background: var(--input-disabled-bg) !important;
  box-shadow: none !important;
  border-color: var(--input-disabled-border) !important;
  color: var(--input-disabled-text) !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
}

/* Override team card position colors for over-cap players */
.team-card .player-search-results .search-result-item.search-result-item-over-cap.pos-F,
.team-card .player-search-results .search-result-item.search-result-item-over-cap.pos-D,
.team-card .player-search-results .search-result-item.search-result-item-over-cap.pos-G {
  background: var(--input-disabled-bg) !important;
  box-shadow: none !important;
  border-color: var(--input-disabled-border) !important;
  color: var(--input-disabled-text) !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
}

/* Override team card position colors for banned players */
.team-card .player-search-results .search-result-item.search-result-item-banned.pos-F,
.team-card .player-search-results .search-result-item.search-result-item-banned.pos-D,
.team-card .player-search-results .search-result-item.search-result-item-banned.pos-G,
.team-card .player-search-results .search-result-item.search-result-item-banned-player.pos-F,
.team-card .player-search-results .search-result-item.search-result-item-banned-player.pos-D,
.team-card .player-search-results .search-result-item.search-result-item-banned-player.pos-G {
  background: var(--input-disabled-bg) !important;
  box-shadow: none !important;
  border-color: var(--input-disabled-border) !important;
  color: var(--input-disabled-text) !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
}

/* Override team card hover states for disabled/banned players */
.team-card .player-search-results .search-result-item.search-result-item-picked.pos-F:hover,
.team-card .player-search-results .search-result-item.search-result-item-picked.pos-D:hover,
.team-card .player-search-results .search-result-item.search-result-item-picked.pos-G:hover,
.team-card .player-search-results .search-result-item.search-result-item-over-cap.pos-F:hover,
.team-card .player-search-results .search-result-item.search-result-item-over-cap.pos-D:hover,
.team-card .player-search-results .search-result-item.search-result-item-over-cap.pos-G:hover,
.team-card .player-search-results .search-result-item.search-result-item-banned.pos-F:hover,
.team-card .player-search-results .search-result-item.search-result-item-banned.pos-D:hover,
.team-card .player-search-results .search-result-item.search-result-item-banned.pos-G:hover,
.team-card .player-search-results .search-result-item.search-result-item-banned-player.pos-F:hover,
.team-card .player-search-results .search-result-item.search-result-item-banned-player.pos-D:hover,
.team-card .player-search-results .search-result-item.search-result-item-banned-player.pos-G:hover {
  background: var(--input-disabled-bg) !important;
  box-shadow: none !important;
  border-color: var(--input-disabled-border) !important;
  color: var(--input-disabled-text) !important;
  cursor: not-allowed !important;
}

.search-result-logo {
  height: 20px;
  width: auto;
  margin-right: 8px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}

.search-result-name {
  flex: 1; /* Take up remaining space */
  margin-right: 8px;
}

.search-result-info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-color-medium);
  border-radius: 50%;
  background-color: var(--info-color);
  color: var(--white);
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  padding: 0;
  line-height: 1;
}

.search-result-info-btn:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.search-result-info-btn:active {
  background-color: var(--primary-hover-color);
  transform: scale(0.95);
}

/* For picked/disabled items, make info button more subtle */
.search-result-item.search-result-item-picked .search-result-info-btn,
.search-result-item.search-result-item-over-cap .search-result-info-btn,
.search-result-item.search-result-item-banned .search-result-info-btn,
.search-result-item.search-result-item-banned-player .search-result-info-btn {
  background-color: var(--dark-gray);
  border-color: var(--dark-gray);
  opacity: 0.7;
}

.search-result-item.search-result-item-picked .search-result-info-btn:hover,
.search-result-item.search-result-item-over-cap .search-result-info-btn:hover,
.search-result-item.search-result-item-banned .search-result-info-btn:hover,
.search-result-item.search-result-item-banned-player .search-result-info-btn:hover {
  background-color: var(--text-color);
  border-color: var(--text-color);
  opacity: 1;
}

/* Styling for picked players in search results */
.search-result-item.search-result-item-picked {
  background: var(--input-disabled-bg);
  box-shadow: none;
  border-color: var(--input-disabled-border);
  color: var(--input-disabled-text);
  cursor: not-allowed;
  opacity: 0.75;
}

.search-result-item.search-result-item-picked:hover {
  background: var(--input-disabled-bg);
  box-shadow: none;
  border-color: var(--input-disabled-border);
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

.search-result-item.search-result-item-picked .search-result-logo {
  opacity: 0.5;
  filter: grayscale(100%);
}

/* Styling for players that would exceed cap in search results */
.search-result-item.search-result-item-over-cap {
  color: var(--danger-color);
  cursor: not-allowed;
  background-color: #fceded;
}

.search-result-item.search-result-item-over-cap:hover {
  background-color: #f9e0e0;
  color: var(--danger-hover-color);
}
.search-result-item.search-result-item-over-cap .search-result-logo {
  opacity: 0.4;
}

/* Player Row States (card UI) */
.player-row.clickable-slot {
  cursor: pointer;
}


.player-row.filled-slot .player-search-input {
  background-color: var(--input-disabled-bg);
  border-color: var(--success-color);
  box-shadow: 0 0 0 1px var(--success-color);
  color: var(--text-color);
}

.player-row.filled-slot .player-search-input:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

.player-row.filled-slot .player-search-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

/* ==========================================================================
   Player Name Cell & Team Logos
   ========================================================================== */
.player-name-cell {
  position: relative; /* Context for search results */
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  overflow: visible;
}

.team-logo {
  height: 22px;
  width: auto;
  margin-right: 2px;
  vertical-align: middle;
  object-fit: contain;
}

.picked-player-name {
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   Banned Teams Section
   ========================================================================== */
/* Includes: .settings-section, .banned-teams-container, .banned-teams-list, .banned-team-item */

.settings-section {
  margin-bottom: var(--spacing-lg);
  display: none; /* Hidden by default, shown when in a room */
}

.settings-section h3 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-color);
  font-size: 1.1em;
  font-weight: bold;
  text-align: left;
}

.banned-teams-container {
  background-color: var(--light-gray);
  border: 1px solid var(--medium-gray);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
}

.banned-teams-controls {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  justify-content: center;
}

.banned-teams-controls .btn {
  padding: 4px 8px;
  font-size: 0.85em;
  background-color: var(--medium-gray);
  border: 1px solid var(--dark-gray);
  color: var(--text-color);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.banned-teams-controls .btn:hover {
  background-color: var(--dark-gray);
  color: var(--white);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

.banned-teams-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-sm);
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm);
  background-color: var(--white);
}

.banned-team-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 4px 6px;
  border-radius: var(--border-radius-sm);
  background-color: var(--light-gray);
  border: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
  cursor: pointer;
  user-select: none;
}

.banned-team-item:hover {
  background-color: var(--medium-gray);
}

.banned-team-item.banned {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.banned-team-item.banned:hover {
  background-color: #f1b0b7;
}

.banned-team-checkbox {
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.banned-team-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.banned-team-name {
  font-size: 0.85em;
  font-weight: 500;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Player Database Overlay
   ========================================================================== */

#player-database-overlay .overlay-content {
  max-width: 1200px;
  max-height: 90vh;
  width: 95vw;
  display: flex;
  flex-direction: column;
}

.player-database-content h2 {
  margin-bottom: var(--spacing-md);
  text-align: center;
}

/* ==========================================================================
   Edit Player Overlay
   ========================================================================== */

#edit-player-overlay .overlay-content {
  max-width: 500px;
  width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.edit-player-content h2 {
  margin-bottom: var(--spacing-md);
  text-align: center;
  color: var(--text-color);
}

.edit-player-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.edit-player-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.edit-player-field label {
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.9rem;
}

.edit-player-name-display {
  background-color: var(--light-gray);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
}

.edit-player-salary-input,
.edit-player-team-select {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  background-color: var(--input-bg);
  color: var(--text-color);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.edit-player-salary-input:hover,
.edit-player-team-select:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

.edit-player-salary-input:focus,
.edit-player-team-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.edit-player-salary-input::placeholder {
  color: var(--text-muted-color);
}

/* Match salary input typography to site-wide salary style */
.edit-player-salary-input {
  letter-spacing: 0.3px;
}

.edit-player-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.edit-player-actions .btn {
  min-width: 100px;
}

.edit-player-save-btn {
  background-color: var(--success-color);
  color: white;
}

.edit-player-save-btn:hover {
  background-color: var(--success-dark);
}

.edit-player-cancel-btn {
  background-color: var(--medium-gray);
  color: var(--text-color);
}

.edit-player-cancel-btn:hover {
  background-color: var(--dark-gray);
}

/* ==========================================================================
   Add Missing Player Overlay
   ========================================================================== */

.add-missing-player-content {
  max-width: 450px;
}

.add-missing-player-content h2 {
  margin-bottom: var(--spacing-md);
  text-align: center;
  color: var(--text-color);
}

.add-missing-player-content p {
  text-align: center;
  color: var(--text-muted-color);
  margin-bottom: var(--spacing-lg);
  font-size: 0.9rem;
}

.add-missing-player-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.add-player-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.add-player-field label {
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.9rem;
}

.add-player-name-input,
.add-player-salary-input,
.add-player-team-select,
.add-player-position-select {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  background-color: var(--input-bg);
  color: var(--text-color);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.add-player-name-input:hover,
.add-player-salary-input:hover,
.add-player-team-select:hover,
.add-player-position-select:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

.add-player-name-input:focus,
.add-player-salary-input:focus,
.add-player-team-select:focus,
.add-player-position-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.add-player-name-input::placeholder,
.add-player-salary-input::placeholder {
  color: var(--text-muted-color);
}

.add-player-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.add-player-actions .btn {
  min-width: 100px;
}

.add-player-save-btn {
  background-color: var(--success-color);
  color: white;
}

.add-player-save-btn:hover {
  background-color: var(--success-dark);
}

.add-player-cancel-btn {
  background-color: var(--medium-gray);
  color: var(--text-color);
}

.add-player-cancel-btn:hover {
  background-color: var(--dark-gray);
}

/* ==========================================================================
   Scoreboard Overlay
   ========================================================================== */

#scoreboard-overlay .overlay-content {
  max-width: 500px;
  max-height: 70vh;
  width: 90vw;
  display: flex;
  flex-direction: column;
}

.scoreboard-overlay-content h2 {
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.scoreboard-overlay-content p {
  margin-bottom: var(--spacing-lg);
  text-align: center;
  color: var(--text-muted-color);
  font-size: 0.9em;
}

.scoreboard-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  flex: 1;
  overflow: hidden;
}

.scoreboard-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--light-gray);
  border-radius: var(--border-radius);
  border: 1px solid var(--medium-gray);
}

.participant-count {
  font-size: 0.9em;
  color: var(--text-muted-color);
  font-weight: bold;
}

.scoreboard-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--white);
  padding: var(--spacing-sm);
}

.scoreboard-participant {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color-light);
  transition: background-color 0.2s ease;
  position: relative;
}

.scoreboard-participant:last-child {
  border-bottom: none;
}

.scoreboard-participant:hover {
  background-color: var(--light-gray);
}

.scoreboard-participant:hover .scoreboard-participant-actions {
  opacity: 1;
  visibility: visible;
}

/* On mobile, also show on tap/click */
.scoreboard-participant.mobile-active .scoreboard-participant-actions {
  opacity: 1;
  visibility: visible;
}

.scoreboard-participant.is-admin {
  background-color: #e7f3ff;
  border-left: 4px solid var(--primary-color);
}

.scoreboard-participant.is-admin:hover {
  background-color: #d0e7ff;
}

.scoreboard-participant.is-current-user {
  background-color: #f0f8ff;
  font-weight: bold;
}

.scoreboard-participant.is-current-user:hover {
  background-color: #e0f0ff;
}

.scoreboard-participant-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: bold;
  font-size: 0.9em;
  flex-shrink: 0;
}

.scoreboard-participant.is-admin .scoreboard-participant-icon {
  background-color: var(--info-color);
}

.scoreboard-participant-name {
  flex-grow: 1;
  font-size: 1em;
  color: var(--text-color);
  text-align: left;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.scoreboard-participant-name-text {
  flex-shrink: 0;
}

.scoreboard-participant-role {
  font-size: 0.75em;
  color: var(--text-muted-color);
  background-color: var(--medium-gray);
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  font-weight: bold;
  text-transform: uppercase;
}

.scoreboard-participant.is-admin .scoreboard-participant-role {
  background-color: var(--info-color);
  color: var(--white);
}

.scoreboard-participant-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Always show admin actions when they contain buttons */
.scoreboard-participant-actions:not(:empty) {
  opacity: 1;
  visibility: visible;
}

/* Update promote and remove admin buttons to be more modern and sleek */
.promote-admin-btn,
.remove-admin-btn {
  background: linear-gradient(
    145deg,
    var(--white),
    var(--light-gray)
  ); /* Subtle gradient for depth */
  color: var(--dark-gray);
  border: none; /* Remove border for minimalist look */
  border-radius: 50%; /* Fully circular */
  padding: 0;
  width: 36px; /* Slightly larger for better touch target */
  height: 36px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.promote-admin-btn svg,
.remove-admin-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease, color 0.3s ease;
  color: var(--text-muted-color);
}

.promote-admin-btn:hover {
  background: linear-gradient(145deg, #e6ffed, #d1f2eb); /* Green gradient */
  transform: translateY(-2px) scale(1.05); /* Lift and slight scale */
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.promote-admin-btn:hover svg {
  transform: scale(1.1);
  color: #10b981; /* Vibrant green */
}

.remove-admin-btn:hover {
  background: linear-gradient(145deg, #ffebeb, #ffdada); /* Red gradient */
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.remove-admin-btn:hover svg {
  transform: scale(1.1);
  color: #ef4444; /* Vibrant red */
}

.promote-admin-btn:active,
.remove-admin-btn:active {
  transform: translateY(0) scale(0.98); /* Press down effect */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.promote-admin-btn:active svg,
.remove-admin-btn:active svg {
  transform: scale(1.05);
}

.promote-admin-btn:focus,
.remove-admin-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.3); /* Focus ring */
}

.scoreboard-empty {
  text-align: center;
  color: var(--text-muted-color);
  padding: var(--spacing-lg);
  font-style: italic;
}

/* ==========================================================================
   Admin Promotion Overlay
   ========================================================================== */

#admin-promotion-overlay .overlay-content {
  max-width: 360px;
  width: 90vw;
  padding: 20px;
}

.admin-promotion-overlay-content h2 {
  margin-bottom: 20px;
  text-align: center;
  color: var(--primary-color);
  font-size: 1.3em;
  font-weight: 600;
}

.admin-promotion-details {
  text-align: left;
  margin-bottom: 20px;
}

.admin-promotion-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0;
  background: none;
  border: none;
}

.admin-promotion-user-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 600;
  font-size: 1em;
  flex-shrink: 0;
}

.admin-promotion-user-details {
  flex-grow: 1;
}

.admin-promotion-user-details h3 {
  margin: 0 0 2px 0;
  font-size: 1.1em;
  color: var(--text-color);
  font-weight: 600;
}

.admin-promotion-user-details p {
  margin: 0;
  font-size: 0.85em;
  color: var(--text-muted-color);
}

.admin-promotion-message {
  margin-bottom: 12px;
}

.admin-promotion-message p {
  margin-bottom: 8px;
  color: var(--text-color);
  text-align: center;
  font-size: 0.95em;
  line-height: 1.4;
}

.admin-promotion-info {
  background-color: #f8f9fa;
  border: none;
  border-radius: 6px;
  padding: 12px;
  border-left: 3px solid var(--primary-color);
}

.admin-promotion-info p {
  margin: 0;
  font-size: 0.85em;
  color: #5a6169;
  text-align: left;
  line-height: 1.3;
}

/* ==========================================================================
   Admin Removal Overlay
   ========================================================================== */

#admin-removal-overlay .overlay-content {
  max-width: 360px;
  width: 90vw;
  padding: 20px;
}

.admin-removal-overlay-content h2 {
  margin-bottom: 20px;
  text-align: center;
  color: var(--danger-color);
  font-size: 1.3em;
  font-weight: 600;
}

.admin-removal-details {
  text-align: left;
  margin-bottom: 20px;
}

.admin-removal-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0;
  background: none;
  border: none;
}

.admin-removal-user-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--danger-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 600;
  font-size: 1em;
  flex-shrink: 0;
}

.admin-removal-user-details {
  flex-grow: 1;
}

.admin-removal-user-details h3 {
  margin: 0 0 2px 0;
  font-size: 1.1em;
  color: var(--text-color);
  font-weight: 600;
}

.admin-removal-user-details p {
  margin: 0;
  font-size: 0.85em;
  color: var(--text-muted-color);
}

.admin-removal-message {
  margin-bottom: 12px;
}

.admin-removal-message p {
  margin-bottom: 8px;
  color: var(--text-color);
  text-align: center;
  font-size: 0.95em;
  line-height: 1.4;
}

/* ==========================================================================
   Banned Teams Overlay
   ========================================================================== */

#banned-teams-overlay .overlay-content {
  max-width: 600px;
  max-height: 80vh;
  width: 90vw;
  display: flex;
  flex-direction: column;
}

.banned-teams-overlay-content h2 {
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.banned-teams-overlay-content p {
  margin-bottom: var(--spacing-lg);
  text-align: center;
  color: var(--text-muted-color);
  font-size: 0.9em;
}

/* ==========================================================================
   Banned Players Overlay
   ========================================================================== */

#banned-players-overlay .overlay-content {
  max-width: 700px;
  max-height: 85vh;
  width: 90vw;
  display: flex;
  flex-direction: column;
}

.banned-players-overlay-content h2 {
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.banned-players-overlay-content p {
  margin-bottom: var(--spacing-lg);
  text-align: center;
  color: var(--text-muted-color);
  font-size: 0.9em;
}

.banned-players-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  flex: 1;
  overflow: hidden;
  height: 100%;
}

.banned-players-search-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  flex-shrink: 0;
}

.banned-players-search-controls {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md);
  background-color: var(--light-gray);
  border-radius: var(--border-radius);
  border: 1px solid var(--medium-gray);
}

#banned-players-search {
  flex: 1;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 1em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#banned-players-search:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

#banned-players-search:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

#banned-players-position-filter {
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 1em;
  background-color: var(--white);
  min-width: 120px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#banned-players-position-filter:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

#banned-players-position-filter:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.banned-players-search-results {
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--white);
}

.banned-players-search-result {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color-light);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.banned-players-search-result:last-child {
  border-bottom: none;
}

.banned-players-search-result:hover {
  background-color: var(--light-gray);
}

.banned-players-search-result.already-banned {
  background-color: #f8d7da;
  color: #721c24;
  cursor: not-allowed;
}

.banned-players-search-result.already-banned:hover {
  background-color: #f8d7da;
}

.banned-players-search-result.already-selected {
  opacity: 0.5;
  background-color: #f8f9fa;
  cursor: not-allowed;
}

.banned-players-search-result.already-selected:hover {
  background-color: #f8f9fa;
}

.banned-players-search-result.already-selected .search-result-logo {
  opacity: 0.5;
}

.banned-players-search-result .search-result-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.banned-players-search-result .search-result-name {
  flex-grow: 1;
  font-weight: 500;
}

.banned-players-search-result .search-result-position {
  font-size: 0.85em;
  color: var(--text-muted-color);
  background-color: var(--medium-gray);
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  font-weight: bold;
}

.banned-players-search-result .search-result-salary {
  font-size: 0.85em;
  color: var(--text-muted-color);
  font-weight: 500;
}

.banned-players-list-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  flex: 1;
  overflow: hidden;
}

.banned-players-list-section h3 {
  margin: 0;
  font-size: 1.1em;
  color: var(--text-color);
  font-weight: bold;
}

.banned-players-controls {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
}

.banned-players-controls .btn {
  padding: 4px 8px;
  font-size: 0.85em;
  background-color: var(--medium-gray);
  border: 1px solid var(--dark-gray);
  color: var(--text-color);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.banned-players-controls .btn:hover {
  background-color: var(--dark-gray);
  color: var(--white);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

.banned-players-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--white);
  padding: var(--spacing-sm);
}

.banned-player-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color-light);
  background-color: #f8d7da;
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-sm);
}

.banned-player-item:last-child {
  margin-bottom: 0;
}

.banned-player-item .banned-player-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.banned-player-item .banned-player-name {
  flex-grow: 1;
  font-weight: 500;
  color: #721c24;
}

.banned-player-item .banned-player-position {
  font-size: 0.85em;
  color: #721c24;
  background-color: rgba(114, 28, 36, 0.1);
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  font-weight: bold;
}

.banned-player-item .banned-player-salary {
  font-size: 0.85em;
  color: #721c24;
  font-weight: 500;
}

.banned-player-item .unban-button {
  padding: 2px 6px;
  font-size: 0.75em;
  background-color: #721c24;
  color: white;
  border: 1px solid #5a1a1f;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.banned-player-item .unban-button:hover {
  background-color: #5a1a1f;
}

.banned-players-empty {
  text-align: center;
  color: var(--text-muted-color);
  padding: var(--spacing-lg);
  font-style: italic;
}

.player-database-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--light-gray);
  border-radius: var(--border-radius);
  border: 1px solid var(--medium-gray);
}

.search-controls {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

#player-database-search {
  width: 300px;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 1em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#player-database-search:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

#player-database-position-filter {
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 1em;
  background-color: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#player-database-position-filter:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

#player-database-position-filter:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.database-stats {
  font-size: 0.9em;
  color: var(--text-muted-color);
  font-weight: bold;
}

.player-database-table-container {
  flex: 1;
  overflow: auto; /* Both horizontal and vertical scrolling */
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--white);
}

#player-database-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  table-layout: auto;
}

#player-database-table th {
  position: sticky;
  top: 0;
  background-color: var(--table-header-bg);
  color: var(--white);
  padding: var(--spacing-sm);
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid var(--border-color);
  z-index: var(--z-index-table-header);
}

#player-database-table th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}

#player-database-table th.sortable:hover {
  background-color: #1a4b8c;
}

#player-database-table th.goalie-stat:hover {
  background-color: #1a4b8c;
}

.sort-indicator {
  margin-left: 0px;
  opacity: 0.5;
  font-size: 0.8em;
}

#player-database-table th.sort-asc .sort-indicator::after {
  content: "▲";
  opacity: 1;
}

#player-database-table th.sort-desc .sort-indicator::after {
  content: "▼";
  opacity: 1;
}

#player-database-table td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color-light);
  vertical-align: middle;
}

.player-database-team-logo {
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-sm);
  vertical-align: middle;
}

.player-database-position {
  font-weight: bold;
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  font-size: 0.85em;
  display: inline-block;
  text-align: center;
  min-width: 20px;
}

.player-database-position.pos-F {
  background-color: var(--pos-f-bg);
  color: #ffffff;  /* White for better contrast with vibrant red */
}

.player-database-position.pos-D {
  background-color: var(--pos-d-bg);
  color: #ffffff;  /* White for better contrast with vibrant blue */
}

.player-database-position.pos-G {
  background-color: var(--pos-g-bg);
  color: #ffffff;  /* White for better contrast with vibrant green */
}

.player-database-salary {
  color: var(--text-color);
}

.btn-full-width {
  width: 100%;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.btn-full-width svg {
  flex-shrink: 0;
}

.goalie-stat-cell {
  font-style: italic;
}

.non-goalie-stat {
  color: var(--dark-gray);
  font-style: italic;
}

.skater-stat-cell {
  font-style: normal;
}

.non-skater-stat {
  color: var(--dark-gray);
  font-style: italic;
}

/* Base minimum width for all columns */
#player-database-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Username Prompt Overlay Specifics */
#username-prompt-overlay .overlay-content {
  max-width: 500px;
}

/* Table Names Overlay Specifics */
#table-names-overlay .overlay-content {
  max-width: 500px;
}

#table-names-input-container {
  margin-bottom: var(--spacing-lg);
  max-height: 60vh;
  overflow-y: auto;
  padding: 2px var(--spacing-sm) 2px 2px; /* Space for box-shadow and scrollbar */
}

/* Exit Confirmation Overlay Specifics */
#exit-confirm-overlay {
  z-index: var(--z-index-confirmation-overlay);
}
#exit-confirm-overlay .overlay-content {
  max-width: 150px;
  width: 60vw;
  padding: var(--spacing-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

/* Resume Confirmation Overlay (ensure above other layers) */
#resume-confirm-overlay {
  z-index: var(--z-index-confirmation-overlay);
}

#exit-confirm-overlay h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
}

#exit-confirm-overlay p {
  margin: 0;
  color: var(--text-muted-color);
  font-size: 0.95rem;
  line-height: 1.4;
}

#exit-confirm-overlay .overlay-buttons {
  margin: 0;
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  align-items: center;
}

#exit-confirm-overlay .overlay-buttons .btn {
  min-width: 100px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Draft Completion Overlay Specifics */
#draft-complete-overlay {
  z-index: var(--z-index-overlay);
  background: 
    radial-gradient(1200px 600px at 80% -10%, rgba(13, 110, 253, 0.08), transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgba(13, 110, 253, 0.05), transparent 60%),
    linear-gradient(135deg, rgba(249, 251, 255, 0.7), rgba(240, 248, 255, 0.8));
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
}

#draft-complete-overlay .overlay-content {
  max-width: 900px;
  width: 90vw;
  padding: var(--spacing-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: 90vh;
  overflow-y: auto;
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(249, 251, 255, 0.90));
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 28px;
  box-shadow:
    0 25px 50px rgba(13, 110, 253, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  position: relative;
}

#draft-complete-overlay h2 {
  padding-top: var(--spacing-lg);
  margin: 0 0 var(--spacing-xs) 0;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-color), var(--info-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.3px;
  text-shadow:
    0 0 6px rgba(13, 110, 253, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Draft Complete Room Code Display */
.draft-complete-room-code-container {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: var(--z-index-overlay-elements);
}

.draft-complete-room-code-display {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(13, 110, 253, 0.04));
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.9em;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.1);
}

.draft-complete-room-code-display .room-code-label {
  font-weight: 600;
  color: var(--text-muted-color);
  font-size: 0.85em;
  letter-spacing: 0.3px;
}

.draft-complete-room-code-text {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-weight: 700;
  color: var(--primary-color);
  font-size: 1.1em;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(13, 110, 253, 0.15);
}

.draft-complete-copy-room-code-button {
  background: var(--white);
  border: 1px solid rgba(13, 110, 253, 0.25);
  border-radius: var(--border-radius-sm);
  color: var(--primary-color);
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 14px;
}

.draft-complete-copy-room-code-button:hover {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

.draft-complete-copy-room-code-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.2);
}

.draft-complete-copy-room-code-button svg {
  width: 14px;
  height: 14px;
}

#draft-complete-overlay p {
  margin: 0 0 var(--spacing-sm) 0;
  color: rgba(0,0,0,0.72);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.5;
}

/* Minimalist completion metrics */
.completion-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--spacing-sm);
  margin: var(--spacing-sm) 0 var(--spacing-md) 0;
}

@media (max-width: 1024px) {
  .completion-metrics { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px) {
  .completion-metrics { grid-template-columns: repeat(2, 1fr); }
}

.completion-metrics .metric {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: 20px;
  padding: calc(var(--spacing-sm) + 2px);
  box-shadow:
    0 8px 32px rgba(13, 110, 253, 0.15),
    0 2px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  grid-column: span 2; /* Regular cards span 2 columns out of 6 */
}

.completion-metrics .metric:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(13, 110, 253, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Make team stats cards larger by spanning 3 columns out of 6 */
#metric-expensive-team-card,
#metric-budget-team-card {
  grid-column: span 3; /* Team cards span 3 columns instead of 2 */
}

.metric-label {
  font-size: 0.8rem;
  color: var(--text-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 2px;
  display: inline-block;
}

.metric-value {
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-color), var(--info-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 6px rgba(13, 110, 253, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.06);
  line-height: 1.2;
}

.metric-sub {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--text-color);
  opacity: 0.85;
}

/* Structured details under metric values */
.metric-details { margin-top: 6px; }
.metric-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.metric-team-logo {
  height: 18px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.metric-meta {
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--text-muted-color);
}

.completion-teams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}


@media (max-width: 1024px) {
  .completion-metrics .metric {
    grid-column: span 2; /* Regular cards span 2 columns out of 4 */
  }
  
  #metric-expensive-team-card,
  #metric-budget-team-card {
    grid-column: span 4; /* Team cards span full width on tablets */
  }
}

@media (max-width: 560px) {
  .completion-metrics .metric {
    grid-column: span 2; /* Regular cards span 2 columns out of 2 (full width) */
  }
  
  #metric-expensive-team-card,
  #metric-budget-team-card {
    grid-column: span 2; /* Team cards span full width on mobile */
  }
}

@media (max-width: 768px) {
  .completion-metrics .metric { border-radius: 16px; }
}

#draft-complete-overlay .overlay-buttons {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#draft-complete-overlay .overlay-buttons .btn {
  min-width: 120px;
  padding: 12px 24px;
  font-size: 1rem;
}

/* Draft Statistics Styling */
.draft-stats-container {
  text-align: left;
  margin: var(--spacing-md) 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(240,248,255,0.5));
  border: 1px solid rgba(13, 110, 253, 0.15);
  border-radius: 20px;
  padding: var(--spacing-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.draft-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.stat-card {
  background: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stat-card h3 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--primary-color);
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 4px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  font-weight: 500;
  color: var(--text-color);
  font-size: 0.95rem;
}

.stat-value {
  font-weight: bold;
  color: var(--primary-color);
  font-size: 0.95rem;
}

.stat-details {
  font-size: 0.85rem;
  color: var(--text-muted-color);
  font-style: italic;
  text-align: right;
  flex: 1;
  margin-left: var(--spacing-sm);
}

.quickest-pick-details,
.longest-pick-details,
.highest-paid-details {
  padding-left: var(--spacing-md);
  border-bottom: none !important;
  padding-top: 0;
  padding-bottom: var(--spacing-xs);
}

.draft-insights {
  background: rgba(13, 110, 253, 0.05);
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  text-align: left;
}

.draft-insights h3 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--primary-color);
  font-size: 1.1rem;
  font-weight: bold;
}

#insights-list {
  margin: 0;
  padding-left: var(--spacing-md);
  list-style-type: disc;
}

#insights-list li {
  margin-bottom: var(--spacing-xs);
  color: var(--text-color);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Mobile responsiveness for statistics */
@media (max-width: 768px) {
  #draft-complete-overlay .overlay-content {
    max-width: 95vw;
    padding: var(--spacing-md);
  }
  
  .draft-stats-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
  
  .stat-card {
    padding: var(--spacing-sm);
  }
  
  .stat-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  
  .stat-value,
  .stat-details {
    text-align: left;
    margin-left: 0;
  }
  
  .quickest-pick-details,
  .longest-pick-details,
  .highest-paid-details {
    padding-left: 0;
  }
}

/* Draft Completion Review Button */
#draft-complete-overlay .overlay-buttons {
  gap: var(--spacing-sm);
}

#draft-complete-review-button {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--white);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#draft-complete-review-button:hover {
  background-color: var(--primary-hover-color);
  border-color: var(--primary-hover-color);
}

/* Floating Pill for Minimized Completion State */
.floating-pill {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, var(--primary-color), var(--info-color));
  color: white;
  border-radius: 50px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  box-shadow: 
    0 4px 16px rgba(13, 110, 253, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  animation: slideInFromRight 0.3s ease-out;
  transition: all 0.3s ease;
  cursor: pointer;
}

.floating-pill:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 20px rgba(13, 110, 253, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.15);
}

.floating-pill.hidden {
  display: none;
}

.pill-text {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.pill-button {
  background: none;
  border: none;
  color: white;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.pill-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.pill-button svg {
  width: 14px;
  height: 14px;
}

/* Animation for pill entrance */
@keyframes slideInFromRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Mobile adjustments for floating pill */
@media (max-width: 768px) {
  .floating-pill {
    top: 15px;
    right: 15px;
    padding: 10px 16px;
    font-size: 0.85rem;
  }
  
  .pill-text {
    font-size: 0.8rem;
  }
}

/* Share Overlay Specifics */
#share-overlay .overlay-content {
  max-width: 450px;
  width: 90vw;
  text-align: center;
}

#share-overlay h2 {
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
  font-size: 1.5em;
  font-weight: 600;
}

#share-overlay p {
  margin-bottom: var(--spacing-lg);
  color: var(--text-muted-color);
  font-size: 1em;
  line-height: 1.5;
}

.share-room-code-container {
  background-color: var(--border-color-light);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.share-room-code-display {
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  text-align: center;
}

.share-room-code-text {
  font-family: 'Courier New', monospace;
  font-size: 1.4em;
  font-weight: bold;
  color: var(--primary-color);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  user-select: all;
}

#share-copy-room-code-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  min-width: 160px;
}

/* General Overlay Buttons Container */
.overlay-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}


.signings-last-updated {
  font-size: 0.85em;
  color: var(--text-muted-color);
  flex: 1 1 auto;
  min-width: 0; /* Allow text to truncate if needed */
  margin-right: var(--spacing-sm);
}

/* Player Database footer: date (left), controls (center), and buttons (right) */
.overlay-buttons.player-database-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.player-database-footer-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}

.player-database-footer-buttons {
  display: flex;
  gap: var(--spacing-sm);
  flex: 0 0 auto;
}

.overlay-buttons .btn {
  padding: 8px 16px;
  font-size: 0.9em;
  font-weight: 500;
}

/* Available Players Toggle Switch */
.available-players-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.available-players-toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-color);
  transition: color 0.2s ease;
}

.available-players-toggle-label:hover {
  color: var(--primary-color);
}

.available-players-toggle-label .toggle-text {
  white-space: nowrap;
}

.available-players-toggle-label .toggle-checkbox {
  display: none;
}

.player-database-footer .available-players-toggle-label .toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: var(--border-color);
  border-radius: 12px;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.player-database-footer .available-players-toggle-label .toggle-switch::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--white);
  top: 3px;
  left: 3px;
  right: auto;
  transition: transform 0.2s ease;
  transform: translateX(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.player-database-footer .available-players-toggle-label input[type="checkbox"]:checked + .toggle-switch {
  background-color: var(--primary-color);
}

.player-database-footer .available-players-toggle-label input[type="checkbox"]:checked + .toggle-switch::before {
  transform: translateX(20px);
}

.player-database-footer .available-players-toggle-label:hover .toggle-switch {
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

/* Available players toggle uses an inner slider element; hide the generic ::before knob here */
.player-database-footer .available-players-toggle-label .toggle-switch::before {
  display: none;
}

/* Use the inner slider to animate the knob based on the checkbox state */
.player-database-footer .available-players-toggle-label .toggle-switch .toggle-slider {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--white);
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  transform: translateX(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Move the knob when checked (input directly precedes .toggle-slider in markup) */
.player-database-footer .available-players-toggle-label .toggle-checkbox:checked + .toggle-slider {
  transform: translateX(20px);
}

/* Update the track color when checked (supported in modern browsers) */
.player-database-footer .available-players-toggle-label .toggle-switch:has(.toggle-checkbox:checked) {
  background-color: var(--primary-color);
}

/* Tablet and medium screen adjustments - tighter spacing to fit more on one line */
@media (max-width: 1024px) {
  .overlay-buttons.player-database-footer {
    gap: var(--spacing-sm);
  }
  
  .player-database-footer .available-players-toggle-label {
    font-size: 0.85rem;
    gap: 10px;
  }
  
  .overlay-buttons .btn {
    padding: 6px 12px;
    font-size: 0.85em;
  }
}

/* Mobile responsiveness for footer - stack vertically on small screens */
@media (max-width: 768px) {
  .overlay-buttons.player-database-footer {
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
  }
  
  .signings-last-updated {
    order: 1;
    text-align: center;
    margin-right: 0;
  }
  
  .player-database-footer-controls {
    order: 2;
  }
  
  .player-database-footer-buttons {
    order: 3;
    justify-content: center;
  }
}

/* ==========================================================================
   Media Controls Bar (in Settings Overlay)
   ========================================================================== */

.media-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.media-control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background-color: var(--light-gray);
  border: 1px solid var(--border-color-medium);
  border-radius: var(--border-radius-sm);
  color: var(--text-color);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.media-control-btn.undo-first {
  margin-right: var(--spacing-md);
}

.media-control-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.media-control-btn:hover:not(:disabled) {
  background-color: var(--medium-gray-hover);
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

.media-control-btn:active:not(:disabled) {
  background-color: var(--medium-gray);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.media-control-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--input-disabled-bg);
  border-color: var(--input-disabled-border);
  color: var(--input-disabled-text);
  box-shadow: none;
}

/* ==========================================================================
   Player Tooltip
   ========================================================================== */

.player-tooltip {
  background-color: var(--tooltip-bg);
  color: var(--white);
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  font-size: 0.9em;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  position: absolute;
  z-index: calc(var(--z-index-search-results) + 1);
  max-width: 280px;
  white-space: normal; /* Allow text wrapping for mobile */
}

.player-tooltip.visible {
  opacity: 1;
}

/* Make tooltip interactive when shown via click (mobile) */
.player-tooltip[data-click-shown="true"] {
  pointer-events: auto;
}

/* Mobile-specific tooltip adjustments */
@media (max-width: 768px) {
  .player-tooltip {
    font-size: 0.85em;
    padding: 10px 14px;
    max-width: calc(100vw - 40px); /* Ensure tooltip fits on small screens */
    border: 1px solid var(--border-color-medium);
  }
}

.search-result-item-over-cap {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
  cursor: not-allowed;
}

.search-result-item-banned,
.search-result-item-banned-player {
  background: var(--input-disabled-bg);
  box-shadow: none;
  border-color: var(--input-disabled-border);
  color: var(--input-disabled-text);
  cursor: not-allowed;
  opacity: 0.75;
}

.search-result-item-banned .search-result-logo,
.search-result-item-banned-player .search-result-logo {
  opacity: 0.5;
  filter: grayscale(100%);
}

/* Add missing player row - minimal, text-only emphasis */
.search-result-add-missing {
  background: transparent;
  border: none;
  margin: 0;
  padding: 5px 8px; /* match .search-result-item */
  font-style: normal;
  align-items: center;
  gap: 8px;
}

.search-result-add-missing .search-result-name {
  color: var(--primary-color);
  font-weight: 600;
}

.search-result-add-missing:hover .search-result-name {
  color: var(--primary-hover-color);
}

.search-result-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  margin-right: 4px;
}

.timer-controls {
  display: inline-flex;
  gap: 4px;
  margin-left: var(--spacing-sm);
  align-items: center;
}

.timer-control-button {
  background-color: #2196f3;
  color: white;
  border: 2px solid #1976d2;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, transform 0.1s;
  box-sizing: border-box;
  margin-right: 8px;
}

.timer-control-button:hover:not(:disabled) {
  background-color: #1976d2;
  border-color: #1565c0;
  transform: translateY(-1px);
}

.timer-control-button:active:not(:disabled) {
  transform: translateY(0);
}

.timer-control-button:disabled {
  background-color: #cccccc;
  border-color: #aaaaaa;
  cursor: not-allowed;
  transform: none;
}

.timer-control-button svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.timer-control-button.timer-reset-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.timer-control-button.timer-reset-btn {
  background-color: #ff9800;
  border-color: #f57c00;
}

.timer-control-button.timer-reset-btn:hover:not(:disabled) {
  background-color: #f57c00;
  border-color: #ef6c00;
}

.timer-add-button {
  background-color: #4caf50;
  color: white;
  border: 2px solid #45a049;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.7em;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, transform 0.1s;
  white-space: nowrap;
  min-width: 0;
  box-sizing: border-box;
}

.timer-add-button:hover:not(:disabled) {
  background-color: #45a049;
  border-color: #3d8b40;
  transform: translateY(-1px);
}

.timer-add-button:active:not(:disabled) {
  transform: translateY(0);
}

.timer-add-button:disabled {
  background-color: #cccccc;
  border-color: #aaaaaa;
  cursor: not-allowed;
  transform: none;
}

/* Inline add-time dropdown menu (opened from plus icon) */
.timer-add-menu {
  position: fixed;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
  padding: 6px;
  z-index: var(--z-index-search-results);
  display: none;
  min-width: 120px;
}

.timer-add-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-color);
  font-size: 0.9em;
}

.timer-add-menu-item:hover {
  background-color: var(--light-gray);
}

/* ==========================================================================
   Player Confirmation Overlay
   ========================================================================== */
#player-confirmation-overlay {
  z-index: var(--z-index-confirmation-overlay);
}

.player-confirmation-content {
  max-width: 680px;
  min-width: 420px;
}

.player-confirmation-details {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
}

.player-confirmation-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  background-color: var(--light-gray);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.player-confirmation-team-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: var(--border-radius-sm);
}

.player-confirmation-text {
  flex: 1;
}

.player-confirmation-text h3 {
  margin: 0 0 6px 0;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-color);
  text-align: center;
}

.player-confirmation-text p {
  margin: 4px 0;
  font-size: 1.1rem;
  color: var(--text-muted-color);
  text-align: center;
}

.player-confirmation-text p:last-child {
  margin-bottom: 0;
}

/* Prominent drafting team banner inside player confirmation */
.drafting-team-banner {
  display: block;
  margin-top: 10px;
  padding: 10px 14px;
  background: #fff8e1;
  border: 2px solid #ffe08a;
  border-radius: 8px;
  color: #7a5d00;
  font-weight: 800;
  font-size: 1.1rem;
  text-align: center;
  text-transform: none;
}

/* Emphasize even more on small screens for clarity */
@media (max-width: 768px) {
  .drafting-team-banner {
    font-size: 1.15rem;
    padding: 12px 16px;
  }
}

.player-confirmation-stats {
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 16px;
}

.player-confirmation-stats h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--text-color);
}

.player-confirmation-stats p {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 0.9em;
  color: var(--text-muted-color);
}

.player-confirmation-stats p:last-child {
  margin-bottom: 0;
}

#player-confirmation-overlay .overlay-buttons {
  justify-content: center;
  gap: 24px;
}

#player-confirmation-overlay .overlay-buttons .btn {
  flex: 0 0 auto;
  min-width: 80px;
  max-width: 120px;
}

/* Symbol button styles for player confirmation overlay */
.btn-confirm-symbol {
  background-color: #28a745;
  border-color: #28a745;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 600;
}

.btn-confirm-symbol:hover {
  background-color: #218838;
  border-color: #1e7e34;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.btn-confirm-symbol:active {
  background-color: #1e7e34;
  border-color: #1c7430;
  transform: translateY(0);
}

.btn-cancel-symbol {
  background-color: #dc3545;
  border-color: #dc3545;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 600;
}

.btn-cancel-symbol:hover {
  background-color: #c82333;
  border-color: #bd2130;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.btn-cancel-symbol:active {
  background-color: #bd2130;
  border-color: #b21f2d;
  transform: translateY(0);
}

.btn-confirm-symbol svg,
.btn-cancel-symbol svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .player-confirmation-content {
    min-width: 320px;
    max-width: 92vw;
  }

  .player-confirmation-info {
    flex-direction: column;
    text-align: center;
  }

  .player-confirmation-team-logo {
    width: 88px;
    height: 88px;
  }

  #player-confirmation-overlay .overlay-buttons {
    flex-direction: column;
  }

  #player-confirmation-overlay .overlay-buttons .btn {
    min-width: 90px;
    max-width: 140px;
  }

  .btn-confirm-symbol,
  .btn-cancel-symbol {
    min-height: 44px;
    padding: 10px 20px;
  }

  .btn-confirm-symbol svg,
  .btn-cancel-symbol svg {
    width: 22px;
    height: 22px;
  }
}

/* ==========================================================================
   Chat Styles
   ========================================================================== */

/* Chat Overlay */
.chat-overlay-content {
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.chat-container {
  flex: 1;
  min-height: 400px;
  max-height: 500px;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-md);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.chat-message {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-sm);
  position: relative;
  word-wrap: break-word;
  max-width: 100%;
}

.chat-message.own-message {
  background-color: var(--primary-color);
  color: var(--white);
  align-self: flex-end;
  text-align: right;
}

.chat-message.other-message {
  background-color: var(--light-gray);
  color: var(--text-color);
  align-self: flex-start;
  text-align: left;
}

.chat-message-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 2px;
  font-size: 0.85em;
}

.chat-message-username {
  font-weight: bold;
}

.chat-message-username.admin {
  color: var(--success-color);
}

.chat-message.own-message .chat-message-username.admin {
  color: #b8e6c1;
}

.chat-message-time {
  font-size: 0.75em;
  opacity: 0.7;
}

.chat-message-content {
  font-size: 0.9em;
  line-height: 1.3;
  white-space: pre-wrap;
}

.chat-input-container {
  display: flex;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
}

#chat-input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 0.9em;
  resize: none;
  min-height: 40px;
  line-height: 1.4;
}

#chat-input:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

#chat-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

#send-chat-message {
  min-width: 50px;
  padding: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

#send-chat-message:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-empty-state {
  text-align: center;
  color: var(--text-muted-color);
  font-style: italic;
  padding: var(--spacing-lg);
}

/* Chat responsiveness */
@media (max-width: 768px) {
  .chat-overlay-content {
    max-width: 95vw;
    max-height: 90vh;
  }

  .chat-container {
    min-height: 300px;
    max-height: 400px;
  }

  .chat-message {
    padding: var(--spacing-sm);
    font-size: 0.85em;
  }

  .chat-message-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .chat-message.own-message .chat-message-header {
    align-items: flex-end;
  }
}

/* ==========================================================================
   Player Database
   ========================================================================== */

/* Player Database Overlay Content */
.player-database-content {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  padding: 1.5rem;
}

.player-database-content h2 {
  margin-bottom: 1.5rem;
  color: var(--text-color);
  font-size: 1.4rem;
  font-weight: 500;
}

/* Database Controls */
.player-database-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.search-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex: 1;
}

#player-database-search {
  flex: 1;
  max-width: 300px;
  padding: 0.6rem 1rem;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  font-size: 0.9rem;
  background-color: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#player-database-search:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

#player-database-search:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

#player-database-position-filter {
  padding: 0.6rem 1rem;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  font-size: 0.9rem;
  background-color: var(--white);
  min-width: 130px;
}

.database-stats {
  font-size: 0.85rem;
  color: var(--text-muted-color);
  font-weight: 400;
}

/* Uniform white button styling for all functional buttons */
#column-visibility-toggle.btn.btn-sm,
#open-player-database-new-tab.btn.btn-sm,
[data-action="show-all"].btn.btn-sm,
[data-action="hide-all"].btn.btn-sm,
[data-action="reset"].btn.btn-sm,
#team-filter-select-all.btn.btn-sm,
#team-filter-deselect-all.btn.btn-sm,
#banned-teams-select-all.btn.btn-sm,
#banned-teams-deselect-all.btn.btn-sm,
#banned-players-clear-all.btn.btn-sm,
#draft-team-filter-select-all.btn.btn-sm,
#draft-team-filter-deselect-all.btn.btn-sm,
#add-missing-player-button {
  padding: 0.6rem 1rem;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  font-size: 0.9rem;
  background-color: var(--white);
  color: var(--text-color);
  min-width: 130px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  line-height: 1.25 !important;
  display: inline-flex !important;
  align-items: center !important;
}

#column-visibility-toggle.btn.btn-sm:hover,
#open-player-database-new-tab.btn.btn-sm:hover,
[data-action="show-all"].btn.btn-sm:hover,
[data-action="hide-all"].btn.btn-sm:hover,
[data-action="reset"].btn.btn-sm:hover,
#team-filter-select-all.btn.btn-sm:hover,
#team-filter-deselect-all.btn.btn-sm:hover,
#banned-teams-select-all.btn.btn-sm:hover,
#banned-teams-deselect-all.btn.btn-sm:hover,
#banned-players-clear-all.btn.btn-sm:hover,
#draft-team-filter-select-all.btn.btn-sm:hover,
#draft-team-filter-deselect-all.btn.btn-sm:hover,
#add-missing-player-button:hover {
  border-color: var(--primary-color);
  background-color: var(--white);
  color: var(--text-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

#column-visibility-toggle.btn.btn-sm:focus,
#open-player-database-new-tab.btn.btn-sm:focus,
[data-action="show-all"].btn.btn-sm:focus,
[data-action="hide-all"].btn.btn-sm:focus,
[data-action="reset"].btn.btn-sm:focus,
#team-filter-select-all.btn.btn-sm:focus,
#team-filter-deselect-all.btn.btn-sm:focus,
#banned-teams-select-all.btn.btn-sm:focus,
#banned-teams-deselect-all.btn.btn-sm:focus,
#banned-players-clear-all.btn.btn-sm:focus,
#draft-team-filter-select-all.btn.btn-sm:focus,
#draft-team-filter-deselect-all.btn.btn-sm:focus,
#add-missing-player-button:focus {
  outline: none;
  border-color: var(--primary-color);
  background-color: var(--white);
  color: var(--text-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

/* Database Table Container */
.player-database-table-container {
  max-height: 65vh;
  overflow: auto;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background-color: var(--white);
}

/* Player Database Table Styles */
#player-database-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background-color: var(--white);
  border: none;
  table-layout: auto;
  font-size: 0.9rem;
}

#player-database-table thead {
  position: sticky;
  top: 0;
  z-index: var(--z-index-table-header);
  background-color: var(--white);
}

#player-database-table th {
  background-color: #f8f9fa;
  color: var(--text-color);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 1rem 0.75rem;
  border: none;
  border-bottom: 1px solid #e1e5e9;
  text-align: left;
  white-space: nowrap;
  height: auto;
}

#player-database-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}

#player-database-table th.sortable:hover {
  background-color: #f1f3f4;
}

#player-database-table td {
  padding: 0.75rem;
  border: none;
  border-bottom: 1px solid #f1f3f4;
  vertical-align: middle;
  height: auto;
  text-align: center;
}

/* Select column - just center the content */
.database-select-column {
  text-align: center;
}


/* New edit column cell/button */
.database-edit-cell {
  text-align: center;
  padding: 0.2rem;
  width: 32px;
}

.database-edit-icon-btn {
  background: none;
  border: none;
  padding: 2px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  cursor: pointer;
}

.database-edit-icon-btn:hover {
  color: var(--primary-color);
}

.database-edit-icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Database Actions Cell - Contains Select and Edit buttons */
.database-actions-cell {
  text-align: center;
  vertical-align: middle;
  padding: 0.2rem;
  width: 50px;
  max-width: 50px;
  display: flex;
  gap: 2px;
  justify-content: center;
  align-items: center;
}

.database-select-btn {
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: 4px;
  padding: 0.2rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
  width: 100%;
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
}

.database-select-btn:hover {
  background-color: var(--primary-hover-color);
}

.database-select-btn:active {
  background-color: #0a58ca;
}

.database-select-btn:disabled {
  background-color: var(--medium-gray);
  color: var(--text-muted-color);
  cursor: not-allowed;
}

/* Database Edit Button */
.database-edit-btn {
  background-color: var(--secondary-color);
  color: var(--white);
  border: none;
  border-radius: 4px;
  padding: 0.2rem 0.3rem;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
}

.database-edit-btn:hover {
  background-color: var(--secondary-dark);
}

.database-edit-btn:active {
  transform: translateY(1px);
}

.database-edit-btn svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

/* Player override value styling */
.player-override-value {
  color: var(--text-color);
  font-weight: 600;
  position: relative;
}

.player-override-value::after {
  content: "*";
  color: var(--text-muted-color);
  margin-left: 2px;
  font-weight: bold;
}

/* Unsigned player value styling */
.player-unsigned-value {
  color: #e74c3c;
  font-weight: 600;
  font-style: italic;
  position: relative;
}

.player-unsigned-value::after {
  content: "";
  color: var(--text-muted-color);
  font-size: 0.85em;
  font-style: normal;
  font-weight: normal;
}

/* Provisional salary input styling */
.provisional-salary-container {
  margin: 12px 0;
  padding: 16px;
  background-color: rgba(231, 76, 60, 0.05);
  border: 1px solid rgba(231, 76, 60, 0.2);
  border-radius: var(--border-radius-md);
}

.provisional-salary-label {
  display: block;
  font-weight: 600;
  color: #e74c3c;
  margin-bottom: 8px;
  font-size: 0.9em;
}

.provisional-salary-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #ddd;
  border-radius: var(--border-radius-sm);
  font-size: 1em;
  box-sizing: border-box;
  font-weight: 600;
  color: var(--text-color);
  background-color: white;
  transition: border-color 0.2s ease;
}

.provisional-salary-input:focus {
  outline: none;
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.provisional-salary-input:invalid {
  border-color: #dc3545;
  background-color: rgba(220, 53, 69, 0.02);
}

.provisional-salary-note {
  font-size: 0.8em;
  color: var(--text-muted-color);
  margin: 6px 0 0 0;
  font-style: italic;
}

/* Provisional salary value styling */
.player-provisional-value {
  color: #e74c3c;
  font-weight: 600;
  font-style: italic;
}

.player-has-overrides {
  background-color: transparent;
  border-left: none;
}

.player-has-overrides:hover {
  background-color: var(--light-gray);
}

/* Sort indicators */
.sort-indicator {
  margin-left: 0.25rem;
  font-size: 0.7rem;
  opacity: 0.6;
}

.sortable.sort-asc .sort-indicator::after {
  content: "↑";
  opacity: 1;
  color: var(--primary-color);
}

.sortable.sort-desc .sort-indicator::after {
  content: "↓";
  opacity: 1;
  color: var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .player-database-content {
    max-width: 98vw;
    padding: 1rem;
  }

  #player-database-table {
    font-size: 0.8rem;
  }

  #player-database-table th,
  #player-database-table td {
    padding: 0.5rem 0.4rem;
  }
}

@media (max-width: 768px) {
  .player-database-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .search-controls {
    flex-direction: column;
  }

  #player-database-search {
    max-width: none;
  }
}

/* ==========================================================================
   Database Player Confirmation Overlay
   ========================================================================== */
#database-player-confirmation-overlay {
  z-index: var(--z-index-confirmation-overlay);
}

.database-selection-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.current-turn-info {
  background-color: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  text-align: center;
  border-left: 4px solid var(--primary-color);
}

.current-turn-info h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--text-color);
}

.current-turn-info p {
  margin: 0;
  font-size: 1.2em;
  font-weight: bold;
  color: var(--primary-color);
}

.database-player-selection-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

#database-player-confirmation-overlay .overlay-buttons {
  justify-content: center;
  gap: 16px;
}

#database-player-confirmation-overlay .overlay-buttons .btn {
  flex: 0 0 auto;
  min-width: 80px;
  max-width: 120px;
}

/* Mobile adjustments for database player confirmation overlay */
@media (max-width: 768px) {
  .database-selection-info {
    gap: var(--spacing-md);
  }

  .current-turn-info {
    padding: var(--spacing-sm);
  }

  .current-turn-info h3 {
    font-size: 1em;
  }

  .current-turn-info p {
    font-size: 1.1em;
  }

  .database-player-selection-details {
    gap: var(--spacing-md);
  }

  #database-player-confirmation-overlay .overlay-buttons {
    flex-direction: column;
  }

  #database-player-confirmation-overlay .overlay-buttons .btn {
    min-width: 90px;
    max-width: 140px;
  }
}
/* ==========================================================================
   Column Visibility Overlay
   ========================================================================== */

/* Column Visibility Overlay Content */
.column-visibility-overlay-content {
  max-width: 650px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
}

.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color-light);
}

.overlay-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-color);
}

.overlay-close-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--border-radius);
  color: var(--dark-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.overlay-close-button:hover {
  background-color: var(--light-gray);
  color: var(--danger-color);
}

.overlay-description {
  color: var(--text-muted-color);
  font-size: 0.9rem;
  margin: 0 0 var(--spacing-lg) 0;
  text-align: center;
}

/* Column Sections */
.column-sections {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: var(--spacing-md);
}

.column-section {
  margin-bottom: var(--spacing-lg);
}

.column-section h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color-light);
}

.column-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-sm);
}

/* Modern Toggle Switches */
.column-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.2s ease;
  user-select: none;
}

.column-toggle:hover {
  background-color: var(--light-gray);
}

.column-toggle input[type="checkbox"] {
  display: none;
}

.column-toggle input[type="checkbox"]:disabled + .toggle-switch {
  opacity: 0.5;
  cursor: not-allowed;
}

.column-toggle input[type="checkbox"]:disabled ~ .toggle-label {
  opacity: 0.7;
}

.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: var(--border-color);
  border-radius: 12px;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.toggle-switch::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--white);
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.column-toggle input[type="checkbox"]:checked + .toggle-switch {
  background-color: var(--primary-color);
}

.column-toggle input[type="checkbox"]:checked + .toggle-switch::before {
  transform: translateX(20px);
}

.toggle-label {
  font-size: 0.875rem;
  color: var(--text-color);
  font-weight: 500;
  flex: 1;
}

.required-indicator {
  font-size: 0.75rem;
  color: var(--primary-color);
  font-weight: 600;
  background-color: rgba(13, 110, 253, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
}

/* Action Buttons */
.overlay-buttons {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color-light);
}

.overlay-buttons .btn {
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  min-width: 100px;
}

/* Hide columns based on data attributes */
.player-database-table-container table th[data-column-hidden="true"],
.player-database-table-container table td[data-column-hidden="true"] {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .column-visibility-dropdown {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 350px;
    max-height: 70vh;
  }

  .column-visibility-actions {
    justify-content: center;
  }

  .column-visibility-actions .btn {
    flex: 0 1 auto;
    min-width: 70px;
  }
}

/* ==========================================================================
   Team Cards Grid
   ========================================================================== */

/* Grid wrapper that holds all team cards */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(410px, 1fr));
  gap: 12px;
  align-items: start;
  padding: var(--spacing-lg);
  box-sizing: border-box;
}

/* Individual team card */
.team-card {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  overflow: visible;
  color: var(--text-color);
}

/* Active team emphasis */
.team-card--active {
  outline: 2px solid var(--accent, #5cccff);
  box-shadow: 0 0 0 3px rgba(92, 204, 255, 0.2) inset;
}

/* Card header: name/logo left, meta (cap bar) right */
.team-card__header {
  display: flex;
  flex-direction: column; /* Stack title above meta */
  align-items: stretch;
  gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(
    180deg,
    rgba(92, 120, 220, 0.15),
    rgba(92, 120, 220, 0.07)
  );
  position: relative; /* Anchor for status dot absolute positioning */
  border-radius: 12px; /* Match parent card's border radius for top corners */
}

.team-card__title {
  margin-right: 80px;
}

.team-card__name {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

.team-card__meta { display:flex; align-items:center; gap:10px; flex-wrap: wrap; width: 100%; }

/* Position counters row under title, above cap bar */
.team-card__pos-counters {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-top: 14px;
}

.team-card__pos-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text-color);
  position: relative;
  overflow: visible;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  border: 1px solid var(--border-color);
}

.team-card__pos-counter::before { display: none; }

/* Subtle colored glow per position */
.team-card__pos-counter.pos-F { box-shadow: 0 0 0 0 var(--white), 0 0 8px 1px var(--pos-f-bg); }
.team-card__pos-counter.pos-D { box-shadow: 0 0 0 0 var(--white), 0 0 8px 1px var(--pos-d-bg); }
.team-card__pos-counter.pos-G { box-shadow: 0 0 0 0 var(--white), 0 0 8px 1px var(--pos-g-bg); }

/* Subtle per-position outline */
.team-card__pos-counter.pos-F { border-color: color-mix(in srgb, var(--pos-f-bg) 60%, var(--border-color)); }
.team-card__pos-counter.pos-D { border-color: color-mix(in srgb, var(--pos-d-bg) 60%, var(--border-color)); }
.team-card__pos-counter.pos-G { border-color: color-mix(in srgb, var(--pos-g-bg) 60%, var(--border-color)); }

.team-card__pos-counter:hover {
  border-color: var(--border-color-dark);
}

/* Reused position chip inside counters */
.team-card__pos-counter .player-database-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.team-card__pos-counter-text {
  font-weight: 700;
}

/* Small label to explain counters */
.team-card__pos-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-color);
  padding: 0 4px;
  border-radius: 0;
  background: transparent;
  border: none;
}

@media (max-width: 768px) {
  .team-card__pos-label { display: none; }
}

.team-card__cap {
  flex: 1 1 auto;
  min-width: 140px;
  height: 8px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(90deg, #22c55e 0%, #fbbf24 80%, #ef4444 100%);
  --cap-fill: 0%;
}

.team-card__cap-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-radius: 6px;
}

.team-card__cap-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cap-fill);
  right: 0;
  background: #e5e7eb;
  border-radius: 0 6px 6px 0;
  transition: left 300ms ease;
}

.team-card__cap-text { 
  font-size: 12px; 
  opacity: .85; 
  white-space: nowrap; 
}

.team-card__pin-button {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--primary-color);
  color: var(--white);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}
.team-card__pin-button:hover {
  background: var(--primary-hover-color);
  border-color: var(--primary-hover-color);
  color: var(--white);
}
.team-card__pin-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}
.team-card__pin-button--active { 
  background-color: var(--medium-gray);
  color: var(--text-color);
  border: 1px solid var(--border-color-medium);
  box-shadow: none !important;
}
.team-card__pin-button--active:hover {
  background-color: var(--medium-gray-hover);
  border-color: var(--border-color-dark);
  color: var(--text-color);
}
.team-card__pin-button--active:focus {
  outline: none;
  box-shadow: none !important;
  border-color: var(--border-color-medium);
}

.team-card__follow-button {
  position: absolute;
  top: 32px;
  right: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--primary-color);
  color: var(--white);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}
.team-card__follow-button:hover {
  background: var(--primary-hover-color);
  border-color: var(--primary-hover-color);
  color: var(--white);
}
.team-card__follow-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}
/* Active state for Follow button when a team is being followed (grey, like pinned) */
.team-card__follow-button.team-card__follow-button--active {
  background: var(--medium-gray);
  color: var(--text-color);
  border-color: var(--border-color-medium);
}
.team-card__follow-button.team-card__follow-button--active:hover {
  background: var(--medium-gray-hover);
  border-color: var(--border-color-dark);
  color: var(--text-color);
}

/* Pin button in overlay acts as minimize button - use blue styling */
.locked-table-display-overlay .team-card__pin-button {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
}
.locked-table-display-overlay .team-card__pin-button:hover {
  background: var(--primary-hover-color);
  border-color: var(--primary-hover-color);
  color: var(--white);
}

/* Body content: search + list */
.team-card__body {
  padding: 12px 14px;
  display: grid;
  gap: 10px;
}

.team-card__search {
  position: relative;
}

/* Ensure team card search inputs have the same hover/focus styling as all other inputs */
.team-card__search input,
.team-card__search-container input {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.team-card__search input:hover,
.team-card__search-container input:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

.team-card__search input:focus,
.team-card__search-container input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.team-card__players {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0px;
}

/* Player row */
.player-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0px 0px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  position: relative; /* Anchor the separator to the row */
}

/* Subtle centered separator between rows (3/4 width) */
.team-card .player-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 1px;
  width: 75%;
  background-color: var(--border-color-light);
}

.player-row__pos {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3a5ad; /* default; overridden per-position below */
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #2a2a2a;
}

/* Position chip colors per role */
.player-row[data-position="F"] .player-row__pos { background: var(--pos-f-bg); }
.player-row[data-position="D"] .player-row__pos { background: var(--pos-d-bg); }
.player-row[data-position="G"] .player-row__pos { background: var(--pos-g-bg); }

.player-row__name {
  font-weight: 600;
}

/* Ensure consistent row height that supports up to two lines of name text */
.team-card .player-row {
  min-height: 60px;
}

.team-card .player-row__name {
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.team-card .player-row__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allow rookie badge tooltips to escape overflow in team cards */
.team-card .player-row__name.has-rookie-badge {
  overflow: visible;
}

/* Team card specific tooltip positioning */
.team-card .rookie-badge-tooltip {
  /* Use higher z-index to appear above team card content */
  z-index: calc(var(--z-index-tooltip) + 10);
}

.player-row__salary {
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
}

/* Edit mode focus border for currently focused pick */
.player-row.edit-mode-focused {
  outline: 3px solid #2563eb;
  outline-offset: -1px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.1);
  transition: outline 0.2s ease, background 0.2s ease;
}

/* Ensure search results within cards mirror existing dropdown behavior */
.player-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid var(--border-color-medium, #c8ced7);
  background-color: var(--white, #ffffff);
  z-index: var(--z-index-search-results);
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  text-align: left;
  display: none; /* toggled via JS */
  border-radius: 8px;
}

/* Ensure readable text in card search dropdown */
.team-card .player-search-results,
.team-card .player-search-results .search-result-item,
.team-card .player-search-results .search-result-name {
  color: var(--text-color);
}

/* Position-based colors for team card search results - higher specificity */

.team-card .player-search-results .search-result-item.pos-F {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pos-f-bg) 26%, #fff) 0%,
    color-mix(in srgb, var(--pos-f-bg) 14%, #fff) 42%,
    #fff 82%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pos-f-bg) 60%, #fff);
}

.team-card .player-search-results .search-result-item.pos-D {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pos-d-bg) 26%, #fff) 0%,
    color-mix(in srgb, var(--pos-d-bg) 14%, #fff) 42%,
    #fff 82%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pos-d-bg) 60%, #fff);
}

.team-card .player-search-results .search-result-item.pos-G {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pos-g-bg) 32%, #fff) 0%,
    color-mix(in srgb, var(--pos-g-bg) 20%, #fff) 42%,
    #fff 82%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pos-g-bg) 68%, #fff);
}


.team-card .player-search-results .search-result-item.pos-F:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pos-f-bg) 32%, #fff) 0%,
    color-mix(in srgb, var(--pos-f-bg) 18%, #fff) 48%,
    #fff 92%);
}


.team-card .player-search-results .search-result-item.pos-D:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pos-d-bg) 32%, #fff) 0%,
    color-mix(in srgb, var(--pos-d-bg) 18%, #fff) 48%,
    #fff 92%);
}


.team-card .player-search-results .search-result-item.pos-G:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pos-g-bg) 36%, #fff) 0%,
    color-mix(in srgb, var(--pos-g-bg) 22%, #fff) 48%,
    #fff 92%);
}

/* Position colors for special states in team card search results */
.team-card .player-search-results .search-result-item.search-result-item-picked.pos-F,
.team-card .player-search-results .search-result-item.search-result-item-picked.pos-D,
.team-card .player-search-results .search-result-item.search-result-item-picked.pos-G {
  background: var(--input-disabled-bg) !important;
  box-shadow: none !important;
  border-color: var(--input-disabled-border) !important;
  color: var(--input-disabled-text) !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
}

.team-card .player-search-results .search-result-item.search-result-item-over-cap.pos-F {
  background-color: color-mix(in srgb, var(--pos-f-bg) 12%, #fceded);
}

.team-card .player-search-results .search-result-item.search-result-item-over-cap.pos-D {
  background-color: color-mix(in srgb, var(--pos-d-bg) 12%, #fceded);
}

.team-card .player-search-results .search-result-item.search-result-item-over-cap.pos-G {
  background-color: color-mix(in srgb, var(--pos-g-bg) 12%, #fceded);
}

/* ==========================================================================
   Team Filter Overlay (for Player Database)
   ========================================================================== */

.team-filter-overlay-content {
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  height: 100%;
}

.team-filter-overlay-content h2 {
  margin: 0;
  text-align: center;
  color: var(--text-color);
  font-size: 1.5rem;
}

.team-filter-overlay-content p {
  margin: 0;
  text-align: center;
  color: var(--text-muted-color);
  font-size: 0.9em;
}

.team-filter-controls {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color-light);
}

.team-filter-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-sm);
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm);
  background-color: var(--white);
  flex: 1;
}

.team-filter-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 4px 6px;
  border-radius: var(--border-radius-sm);
  background-color: var(--light-gray);
  border: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
  cursor: pointer;
  user-select: none;
}

.team-filter-item:hover {
  background-color: var(--medium-gray);
}

.team-filter-item.filtered {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.team-filter-item.filtered:hover {
  background-color: #f1b0b7;
}

.team-filter-checkbox {
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.team-filter-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.team-filter-name {
  font-size: 0.85em;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.team-filter-actions {
  display: flex;
  justify-content: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color-light);
}

/* Uniform grey styling for all close and cancel buttons */
#close-share-button,
#cancel-exit-button,
#cancel-resume-button,
#close-player-database-button,
#close-banned-teams-button,
#close-banned-players-button,
#close-scoreboard-button,
#cancel-admin-promotion-button,
#cancel-admin-removal-button,
#close-chat-button,
#close-draft-team-filter-button,
#close-team-filter-button,
#cancel-join-button,
#cancel-username-button,
#cancel-table-names-button,
#cancel-player-edits-button,
#cancel-add-missing-player-button,
#error-message-close,
#close-team-filter-overlay-button,
#close-edit-player-button,
#close-add-missing-player-button,
#close-draft-team-filter-overlay-button,
.notification-close,
.mobile-warning-dismiss,
#draft-team-filter-select-all,
#draft-team-filter-deselect-all,
#team-filter-select-all,
#team-filter-deselect-all,
.edit-settings-cancel-btn {
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
}

#close-share-button:hover,
#cancel-exit-button:hover,
#cancel-resume-button:hover,
#close-player-database-button:hover,
#close-banned-teams-button:hover,
#close-banned-players-button:hover,
#close-scoreboard-button:hover,
#cancel-admin-promotion-button:hover,
#cancel-admin-removal-button:hover,
#close-chat-button:hover,
#close-draft-team-filter-button:hover,
#close-team-filter-button:hover,
#cancel-join-button:hover,
#cancel-username-button:hover,
#cancel-table-names-button:hover,
#cancel-player-edits-button:hover,
#cancel-add-missing-player-button:hover,
#error-message-close:hover,
#close-team-filter-overlay-button:hover,
#close-edit-player-button:hover,
#close-add-missing-player-button:hover,
#close-draft-team-filter-overlay-button:hover,
.notification-close:hover,
.mobile-warning-dismiss:hover,
#draft-team-filter-select-all:hover,
#draft-team-filter-deselect-all:hover,
#team-filter-select-all:hover,
#team-filter-deselect-all:hover,
.edit-settings-cancel-btn:hover {
  background-color: #e0e0e0;
  border-color: var(--primary-color);
  color: #333;
  box-shadow: 0 0 0 1px var(--primary-color);
}

#close-share-button:active,
#cancel-exit-button:active,
#cancel-resume-button:active,
#close-player-database-button:active,
#close-banned-teams-button:active,
#close-banned-players-button:active,
#close-scoreboard-button:active,
#cancel-admin-promotion-button:active,
#cancel-admin-removal-button:active,
#close-chat-button:active,
#close-draft-team-filter-button:active,
#close-team-filter-button:active,
#cancel-join-button:active,
#cancel-username-button:active,
#cancel-table-names-button:active,
#cancel-player-edits-button:active,
#cancel-add-missing-player-button:active,
#error-message-close:active,
#close-team-filter-overlay-button:active,
#close-edit-player-button:active,
#close-add-missing-player-button:active,
#close-draft-team-filter-overlay-button:active,
.notification-close:active,
.mobile-warning-dismiss:active,
#draft-team-filter-select-all:active,
#draft-team-filter-deselect-all:active,
#team-filter-select-all:active,
#team-filter-deselect-all:active,
.edit-settings-cancel-btn:active {
  background-color: #d0d0d0;
  color: #333;
}

/* Uniform blue button styling for all confirmation/save/apply/resume buttons */
#confirm-resume-button,
#save-player-edits-button,
#save-missing-player-button,
#confirm-admin-promotion-button,
#confirm-admin-removal-button,
#confirm-username-button,
#confirm-table-names-button,
#share-copy-room-code-button,
#add-missing-player-button,
#send-chat-message,
#start-draft-button,
#join-draft-button,
.edit-settings-save-btn {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

#confirm-resume-button:hover,
#save-player-edits-button:hover,
#save-missing-player-button:hover,
#confirm-admin-promotion-button:hover,
#confirm-admin-removal-button:hover,
#confirm-username-button:hover,
#confirm-table-names-button:hover,
#share-copy-room-code-button:hover,
#add-missing-player-button:hover,
#send-chat-message:hover,
#start-draft-button:hover,
#join-draft-button:hover,
.edit-settings-save-btn:hover {
  background-color: var(--primary-hover-color);
  border-color: var(--primary-hover-color);
  color: var(--white);
}

#confirm-resume-button:active,
#save-player-edits-button:active,
#save-missing-player-button:active,
#confirm-admin-promotion-button:active,
#confirm-admin-removal-button:active,
#confirm-username-button:active,
#confirm-table-names-button:active,
#share-copy-room-code-button:active,
#add-missing-player-button:active,
#send-chat-message:active,
#start-draft-button:active,
#join-draft-button:active,
.edit-settings-save-btn:active {
  background-color: #0a58ca;
  border-color: #0a58ca;
  color: var(--white);
}

/* Team column filter button */
#player-database-table th[data-sort="team"] {
  position: relative;
}

.team-filter-button {
  position: absolute;
  left: calc(50% + 35px);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  transition: background-color 0.2s ease;
  z-index: var(--z-index-ui-elements);
}

.team-filter-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.team-filter-button::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='256' height='256' viewBox='0 0 256 256' xml:space='preserve'%3e%3cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)'%3e%3cpath d='M 85.813 59.576 H 55.575 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 30.237 c 1.657 0 3 1.343 3 3 S 87.47 59.576 85.813 59.576 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 48.302 66.849 c -5.664 0 -10.272 -4.608 -10.272 -10.272 c 0 -5.665 4.608 -10.273 10.272 -10.273 c 5.665 0 10.273 4.608 10.273 10.273 C 58.575 62.24 53.967 66.849 48.302 66.849 z M 48.302 52.303 c -2.356 0 -4.272 1.917 -4.272 4.273 c 0 2.355 1.917 4.272 4.272 4.272 c 2.356 0 4.273 -1.917 4.273 -4.272 C 52.575 54.22 50.658 52.303 48.302 52.303 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 41.029 59.576 H 4.188 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 36.842 c 1.657 0 3 1.343 3 3 S 42.686 59.576 41.029 59.576 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 85.813 36.424 h -57.79 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 57.79 c 1.657 0 3 1.343 3 3 S 87.47 36.424 85.813 36.424 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 20.75 43.697 c -5.665 0 -10.273 -4.608 -10.273 -10.273 s 4.608 -10.273 10.273 -10.273 s 10.273 4.608 10.273 10.273 S 26.414 43.697 20.75 43.697 z M 20.75 29.151 c -2.356 0 -4.273 1.917 -4.273 4.273 s 1.917 4.273 4.273 4.273 s 4.273 -1.917 4.273 -4.273 S 23.105 29.151 20.75 29.151 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 13.477 36.424 H 4.188 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 9.289 c 1.657 0 3 1.343 3 3 S 15.133 36.424 13.477 36.424 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 57.637 13.273 H 4.188 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 53.449 c 1.657 0 3 1.343 3 3 S 59.294 13.273 57.637 13.273 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 64.909 20.546 c -5.664 0 -10.272 -4.608 -10.272 -10.273 S 59.245 0 64.909 0 c 5.665 0 10.273 4.608 10.273 10.273 S 70.574 20.546 64.909 20.546 z M 64.909 6 c -2.355 0 -4.272 1.917 -4.272 4.273 s 1.917 4.273 4.272 4.273 c 2.356 0 4.273 -1.917 4.273 -4.273 S 67.266 6 64.909 6 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 85.813 13.273 h -13.63 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 13.63 c 1.657 0 3 1.343 3 3 S 87.47 13.273 85.813 13.273 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 85.813 82.728 h -57.79 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 57.79 c 1.657 0 3 1.343 3 3 S 87.47 82.728 85.813 82.728 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 20.75 90 c -5.665 0 -10.273 -4.608 -10.273 -10.272 c 0 -5.665 4.608 -10.273 10.273 -10.273 s 10.273 4.608 10.273 10.273 C 31.022 85.392 26.414 90 20.75 90 z M 20.75 75.454 c -2.356 0 -4.273 1.917 -4.273 4.273 c 0 2.355 1.917 4.272 4.273 4.272 s 4.273 -1.917 4.273 -4.272 C 25.022 77.371 23.105 75.454 20.75 75.454 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 13.477 82.728 H 4.188 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 9.289 c 1.657 0 3 1.343 3 3 S 15.133 82.728 13.477 82.728 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3c/g%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

#player-database-table th[data-sort="team"].team-filter-active {
  background-color: #2c5aa0;
}

#player-database-table th[data-sort="team"].team-filter-active::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='256' height='256' viewBox='0 0 256 256' xml:space='preserve'%3e%3cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)'%3e%3cpath d='M 85.813 59.576 H 55.575 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 30.237 c 1.657 0 3 1.343 3 3 S 87.47 59.576 85.813 59.576 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 48.302 66.849 c -5.664 0 -10.272 -4.608 -10.272 -10.272 c 0 -5.665 4.608 -10.273 10.272 -10.273 c 5.665 0 10.273 4.608 10.273 10.273 C 58.575 62.24 53.967 66.849 48.302 66.849 z M 48.302 52.303 c -2.356 0 -4.272 1.917 -4.272 4.273 c 0 2.355 1.917 4.272 4.272 4.272 c 2.356 0 4.273 -1.917 4.273 -4.272 C 52.575 54.22 50.658 52.303 48.302 52.303 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 41.029 59.576 H 4.188 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 36.842 c 1.657 0 3 1.343 3 3 S 42.686 59.576 41.029 59.576 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 85.813 36.424 h -57.79 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 57.79 c 1.657 0 3 1.343 3 3 S 87.47 36.424 85.813 36.424 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 20.75 43.697 c -5.665 0 -10.273 -4.608 -10.273 -10.273 s 4.608 -10.273 10.273 -10.273 s 10.273 4.608 10.273 10.273 S 26.414 43.697 20.75 43.697 z M 20.75 29.151 c -2.356 0 -4.273 1.917 -4.273 4.273 s 1.917 4.273 4.273 4.273 s 4.273 -1.917 4.273 -4.273 S 23.105 29.151 20.75 29.151 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 13.477 36.424 H 4.188 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 9.289 c 1.657 0 3 1.343 3 3 S 15.133 36.424 13.477 36.424 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 57.637 13.273 H 4.188 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 53.449 c 1.657 0 3 1.343 3 3 S 59.294 13.273 57.637 13.273 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 64.909 20.546 c -5.664 0 -10.272 -4.608 -10.272 -10.273 S 59.245 0 64.909 0 c 5.665 0 10.273 4.608 10.273 10.273 S 70.574 20.546 64.909 20.546 z M 64.909 6 c -2.355 0 -4.272 1.917 -4.272 4.273 s 1.917 4.273 4.272 4.273 c 2.356 0 4.273 -1.917 4.273 -4.273 S 67.266 6 64.909 6 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 85.813 13.273 h -13.63 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 13.63 c 1.657 0 3 1.343 3 3 S 87.47 13.273 85.813 13.273 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 85.813 82.728 h -57.79 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 57.79 c 1.657 0 3 1.343 3 3 S 87.47 82.728 85.813 82.728 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 20.75 90 c -5.665 0 -10.273 -4.608 -10.273 -10.272 c 0 -5.665 4.608 -10.273 10.273 -10.273 s 10.273 4.608 10.273 10.273 C 31.022 85.392 26.414 90 20.75 90 z M 20.75 75.454 c -2.356 0 -4.273 1.917 -4.273 4.273 c 0 2.355 1.917 4.272 4.273 4.272 s 4.273 -1.917 4.273 -4.272 C 25.022 77.371 23.105 75.454 20.75 75.454 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3cpath d='M 13.477 82.728 H 4.188 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 9.289 c 1.657 0 3 1.343 3 3 S 15.133 82.728 13.477 82.728 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: black; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3e%3c/g%3e%3c/svg%3e");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}



/* ==========================================================================
   Edit Draft Controls Overlay
   ========================================================================== */

.edit-draft-overlay {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-index-floating-windows);
  user-select: none;
  pointer-events: auto;
}

.edit-draft-controls {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: move;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 500px;
  min-width: 380px;
}

.edit-draft-controls,
.follow-team-card-overlay .follow-team-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: 32px;
  box-shadow:
    0 8px 32px rgba(13, 110, 253, 0.15),
    0 2px 16px rgba(0, 0, 0, 0.08);
}

.edit-draft-controls:hover {
  box-shadow: 
    0 12px 40px rgba(13, 110, 253, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.edit-draft-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  position: relative;
}

.edit-draft-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-align: center;
  flex: 1;
}

.edit-draft-close-btn,
.follow-team-card .unfollow-btn,
.locked-table-display-overlay .overlay-close-button,
#close-ban-selection-button {
  background: none;
  border: none;
  color: var(--text-muted-color);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.edit-draft-close-btn:hover,
.follow-team-card .unfollow-btn:hover,
.locked-table-display-overlay .overlay-close-button:hover,
#close-ban-selection-button:hover {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger-color);
  transform: translateY(-50%) scale(1.1);
}

.edit-draft-close-btn svg,
.follow-team-card .unfollow-btn svg,
.locked-table-display-overlay .overlay-close-button svg,
#close-ban-selection-button svg {
  width: 14px;
  height: 14px;
}

/* Override positioning for locked table overlay close button only */
.locked-table-display-overlay .overlay-close-button {
  top: 0px;
  right: 0px;
  transform: none;
}

/* Override hover transform for locked table overlay close button only */
.locked-table-display-overlay .overlay-close-button:hover {
  transform: scale(1.1);
}

.edit-draft-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.edit-draft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(240, 244, 255, 0.8));
  border: 1px solid rgba(13, 110, 253, 0.15);
  border-radius: 50%;
  color: var(--primary-color);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 3px 8px rgba(13, 110, 253, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
}

.edit-draft-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(13, 110, 253, 0.1), transparent);
  transition: left 0.5s ease;
}

.edit-draft-btn:hover:not(:disabled) {
  background: linear-gradient(145deg, var(--primary-color), var(--primary-hover-color));
  border-color: var(--primary-hover-color);
  color: var(--white);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 6px 16px rgba(13, 110, 253, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.edit-draft-btn:hover:not(:disabled)::before {
  left: 100%;
}

.edit-draft-btn:active:not(:disabled) {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 
    0 4px 12px rgba(13, 110, 253, 0.25),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.edit-draft-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: linear-gradient(145deg, rgba(240, 240, 240, 0.8), rgba(230, 230, 230, 0.6));
  border-color: rgba(200, 200, 200, 0.5);
  color: var(--text-muted-color);
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: none;
}

.edit-draft-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.edit-draft-btn:hover:not(:disabled) svg {
  transform: scale(1.1);
}

/* Special styling for the undo button */
.edit-draft-btn#edit-undo-button {
  margin-right: 12px;
  border: 2px solid rgba(220, 53, 69, 0.2);
  color: var(--danger-color);
}

.edit-draft-btn#edit-undo-button:hover:not(:disabled) {
  background: linear-gradient(145deg, var(--danger-color), var(--danger-hover-color));
  border-color: var(--danger-hover-color);
  color: var(--white);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .edit-draft-overlay {
    top: 100px;
    left: 12px;
    right: 12px;
    transform: none;
  }

  .edit-draft-controls {
    min-width: auto;
    max-width: none;
    padding: 10px 16px;
    border-radius: 28px;
  }
  .follow-team-card-overlay {
    top: 100px;
    right: 12px;
  }

  .follow-team-card {
    border-radius: 28px;
    padding: 10px 16px;
  }

  .edit-draft-buttons {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .edit-draft-btn {
    width: 36px;
    height: 36px;
  }

  .edit-draft-btn svg {
    width: 16px;
    height: 16px;
  }

  .edit-draft-btn#edit-undo-button {
    margin-right: 8px;
  }

  .edit-draft-title {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .edit-draft-controls {
    padding: 8px 12px;
    border-radius: 24px;
  }

  .follow-team-card {
    border-radius: 24px;
    padding: 8px 12px;
  }

  .edit-draft-buttons {
    gap: 4px;
  }

  .edit-draft-btn {
    width: 32px;
    height: 32px;
  }

  .edit-draft-btn svg {
    width: 14px;
    height: 14px;
  }

  .edit-draft-btn#edit-undo-button {
    margin-right: 6px;
  }
}

/* Animation for showing/hiding the overlay */
.edit-draft-overlay.show {
  animation: editDraftSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.edit-draft-overlay.hide {
  animation: editDraftSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes editDraftSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes editDraftSlideOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.9);
  }
}

/* ==========================================================================
   Edit Menu Overlay
   ========================================================================== */

.edit-menu-overlay {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-index-floating-windows);
  user-select: none;
  pointer-events: auto;
}

.edit-menu-controls {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: move;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 320px;
  min-width: 300px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: 32px;
  box-shadow:
    0 8px 32px rgba(13, 110, 253, 0.15),
    0 2px 16px rgba(0, 0, 0, 0.08);
}

.edit-menu-controls:hover {
  box-shadow: 
    0 12px 40px rgba(13, 110, 253, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.edit-menu-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
}

.edit-menu-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-align: center;
  flex: 1;
}

.edit-menu-close-btn {
  background: none;
  border: none;
  color: var(--text-muted-color);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.edit-menu-close-btn:hover {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger-color);
  transform: translateY(-50%) scale(1.1);
}

.edit-menu-close-btn svg {
  width: 14px;
  height: 14px;
}

.edit-menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.edit-menu-btn {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.08) 0%, rgba(13, 110, 253, 0.12) 100%);
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: 16px;
  color: var(--primary-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.edit-menu-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.3s ease;
}

.edit-menu-btn:hover {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.12) 0%, rgba(13, 110, 253, 0.18) 100%);
  border-color: rgba(13, 110, 253, 0.3);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 16px rgba(13, 110, 253, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

.edit-menu-btn:hover::before {
  left: 100%;
}

.edit-menu-btn:active {
  transform: translateY(0);
  box-shadow: 
    0 2px 8px rgba(13, 110, 253, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.edit-menu-btn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.edit-menu-btn span {
  flex: 1;
  font-weight: 600;
}

.edit-menu-overlay.show {
  animation: editMenuSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.edit-menu-overlay.hide {
  animation: editMenuSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes editMenuSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes editMenuSlideOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.9);
  }
}

/* ==========================================================================
   Edit Settings Overlay
   ========================================================================== */

.edit-settings-overlay {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-index-floating-windows);
  user-select: none;
  pointer-events: auto;
}

/* Settings Change Warning Overlay - appears above edit settings */
#settings-change-warning-overlay {
  z-index: var(--z-index-confirmation-overlay);
}

/* Salary Cap Warning Overlay - appears above other overlays */
#salary-cap-warning-overlay {
  z-index: calc(var(--z-index-confirmation-overlay) + 1);
}

.edit-settings-controls {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: move;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 640px;
  max-height: calc(100vh - 100px);
  overflow-y: visible;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(13, 110, 253, 0.15),
    0 2px 16px rgba(0, 0, 0, 0.08);
}

.edit-settings-controls:hover {
  box-shadow: 
    0 12px 40px rgba(13, 110, 253, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.1);
}

.edit-settings-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  cursor: move;
}

.edit-settings-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-align: center;
  flex: 1;
}

.edit-settings-close-btn {
  background: none;
  border: none;
  color: var(--text-muted-color);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.edit-settings-close-btn:hover {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger-color);
  transform: translateY(-50%) scale(1.1);
}

.edit-settings-close-btn svg {
  width: 16px;
  height: 16px;
}

.edit-settings-form {
  display: flex;
  flex-direction: column;
  gap: 0px;
  cursor: default;
}

#edit-draft-settings {
  position: relative;
  width: 100%;
  margin-bottom: var(--spacing-sm);
  padding: clamp(12px, 2.4vw, 20px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 22px rgba(13, 110, 253, 0.08), 0 2px 10px rgba(0, 0, 0, 0.06);
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: clamp(8px, 1.2vw, 14px) clamp(10px, 1.6vw, 16px);
  box-sizing: border-box;
  max-width: 100%;
}

#edit-draft-settings::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(13,110,253,0.35));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

#edit-draft-settings .settings-input-group {
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

#edit-draft-settings .settings-input-group label {
  display: block;
  margin-bottom: 0;
  font-weight: 600;
  letter-spacing: 0.2px;
  font-size: 0.92em;
  color: var(--text-muted-color);
  text-align: center;
}

#edit-draft-settings .settings-input-group input[type="number"],
#edit-draft-settings .settings-input-group input[type="text"],
#edit-draft-settings .settings-input-group select {
  width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 1em;
  background-color: rgba(255,255,255,0.9);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

#edit-draft-settings .settings-input-group select,
#edit-draft-settings .settings-input-group input[type="number"] {
  width: fit-content;
  min-width: 84px;
  max-width: 140px;
  align-self: center;
}

#edit-draft-settings .settings-input-group:has(#edit-num-teams) {
  grid-column: 1 / -1;
  justify-self: center;
}

#edit-draft-settings .settings-input-group input[type="number"]:hover,
#edit-draft-settings .settings-input-group input[type="text"]:hover,
#edit-draft-settings .settings-input-group select:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

#edit-draft-settings .settings-input-group input[type="number"]:focus,
#edit-draft-settings .settings-input-group input[type="text"]:focus,
#edit-draft-settings .settings-input-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
  background-color: #fff;
}

/* Section labels */
#edit-draft-settings .settings-section-label {
  grid-column: 1 / -1;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--dark-gray);
  margin-top: 6px;
  margin-bottom: 4px;
  text-align: center;
}

#edit-draft-settings .settings-section-label:not(:first-of-type) {
  margin-top: 12px;
}

#edit-draft-settings .settings-section-label:not(:first-of-type)::before {
  content: "";
  display: block;
  height: 1px;
  width: 75%;
  margin: 0px auto 16px;
  background: var(--border-color-light);
  border-radius: 1px;
}

/* Options grid layout */
#edit-draft-settings .options-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 0.7fr);
  gap: clamp(8px, 1.2vw, 14px) clamp(10px, 1.6vw, 16px);
  justify-items: start;
  align-items: center;
}

#edit-draft-settings .settings-checkbox-group { 
  grid-column: 1 / -1; 
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  justify-items: center;
}

#edit-draft-settings .settings-checkbox-group label { 
  grid-column: 1 / 2; 
  text-align: center; 
}

#edit-draft-settings .settings-checkbox-group .salary-cap-inline-container { 
  grid-column: 2 / 3; 
  justify-self: center; 
}

#edit-draft-settings .settings-checkbox-group .timer-inline-container { 
  grid-column: 2 / 3; 
  justify-self: center; 
}

/* Salary cap spans full width with 50/50 internal columns */
#edit-draft-settings .options-grid .settings-checkbox-group:has(#editSalaryCapInlineContainer) { 
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px;
  justify-items: stretch;
  align-items: center;
  width: 100%;
  min-height: 100%;
}

#edit-draft-settings .options-grid .settings-checkbox-group:has(#editSalaryCapInlineContainer) label[for="edit-enable-salary-cap"] {
  grid-column: 1 / 2 !important;
  text-align: center !important;
  justify-self: left !important;
  margin-left: 20px !important;
}

#edit-draft-settings .options-grid .settings-checkbox-group:has(#editSalaryCapInlineContainer) .salary-cap-inline-container#editSalaryCapInlineContainer {
  grid-column: 2 / 3 !important;
  justify-self: center !important;
}

/* Round timer spans full width with 50/50 internal columns */
#edit-draft-settings .options-grid .settings-checkbox-group:has(.timer-inline-container) { 
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px;
  justify-items: stretch;
  align-items: center;
  width: 100%;
  min-height: 100%;
}

#edit-draft-settings .options-grid .settings-checkbox-group:has(.timer-inline-container) label[for="edit-has-timer"] {
  grid-column: 1 / 2 !important;
  text-align: center !important;
  justify-self: left !important;
  margin-left: 20px !important;
}

#edit-draft-settings .options-grid .settings-checkbox-group:has(.timer-inline-container) .timer-inline-container {
  grid-column: 2 / 3 !important;
  justify-self: center !important;
}

/* Serpentine option in left column only */
#edit-draft-settings .options-grid .settings-checkbox-group:has(#edit-serpentine-order) { 
  grid-column: 1 !important;
  justify-self: left !important;
  margin-left: 20px !important;
  grid-template-columns: 1fr auto !important;
  align-items: center;
  min-height: 100%;
}

/* Checkbox styling */
#edit-draft-settings .settings-checkbox-group input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

#edit-draft-settings .settings-checkbox-group label {
  position: relative;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
  padding-left: 56px;
}

#edit-draft-settings .settings-checkbox-group input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 26px;
  background: #e7ebf0;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  transition: background 0.2s ease;
}

#edit-draft-settings .settings-checkbox-group input[type="checkbox"] + label::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: left 0.2s ease, box-shadow 0.2s ease;
}

#edit-draft-settings .settings-checkbox-group input[type="checkbox"]:checked + label::before {
  background: linear-gradient(180deg, var(--primary-color), #5aa8ff);
}

#edit-draft-settings .settings-checkbox-group input[type="checkbox"]:checked + label::after {
  left: 23px;
  box-shadow: 0 2px 6px rgba(13,110,253,0.35);
}

/* Inline timer styles */
#edit-draft-settings .timer-inline-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  padding: 2px 4px;
  background-color: transparent;
  border-radius: 3px;
  transition: all 0.2s ease;
}

#edit-draft-settings .timer-inline-container:hover {
  background-color: rgba(13, 110, 253, 0.04);
  border-radius: 4px;
}

#edit-draft-settings .timer-inline-container select {
  width: fit-content;
  min-width: 84px;
  max-width: 140px;
  padding: 7px 11px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 1em;
  background-color: rgba(255,255,255,0.9);
  color: var(--text-color);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  cursor: pointer;
}

#edit-draft-settings .timer-inline-container select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
  background-color: #fff;
}

#edit-draft-settings .timer-inline-container select:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

/* Salary cap inline container */
#edit-draft-settings .salary-cap-inline-container {
  display: flex;
  align-items: center;
  margin-left: 0;
  padding: 2px 4px;
  background-color: transparent;
  border-radius: 3px;
  transition: all 0.2s ease;
}

#edit-draft-settings .salary-cap-inline-container:hover {
  background-color: rgba(13, 110, 253, 0.04);
  border-radius: 4px;
}

#edit-draft-settings .salary-cap-inline-container input[type="text"] {
  width: 100%;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--white);
  color: var(--text-color);
  font-size: 1em;
  font-weight: 500;
  padding: 9px 11px;
  transition: all 0.2s ease;
}

#edit-draft-settings .salary-cap-inline-container:hover input[type="text"] {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

#edit-draft-settings #edit-salary-cap { 
  width: 140px; 
  font-size: 1em; 
}

/* Mobile styles */
@media (max-width: 768px) {
  #edit-draft-settings { 
    grid-template-columns: 1fr; 
  }
  #edit-draft-settings .settings-input-group select,
  #edit-draft-settings .settings-input-group input[type="number"],
  #edit-draft-settings .settings-input-group input[type="text"] {
    width: 100%;
  }
  #edit-draft-settings .settings-checkbox-group { 
    grid-template-columns: 1fr; 
  }
  #edit-draft-settings .settings-checkbox-group .salary-cap-inline-container,
  #edit-draft-settings .settings-checkbox-group .timer-inline-container { 
    justify-self: stretch; 
  }
  
  #edit-draft-settings .options-grid { 
    grid-template-columns: 1fr; 
  }
  
  #edit-draft-settings .options-grid .settings-checkbox-group:has(#editSalaryCapInlineContainer) { 
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  
  #edit-draft-settings .options-grid .settings-checkbox-group:has(#editSalaryCapInlineContainer) label[for="edit-enable-salary-cap"] {
    text-align: center !important;
    justify-self: center !important;
  }
  
  #edit-draft-settings .options-grid .settings-checkbox-group:has(#editSalaryCapInlineContainer) .salary-cap-inline-container#editSalaryCapInlineContainer {
    justify-self: center !important;
  }
  
  #edit-draft-settings .options-grid .settings-checkbox-group:has(.timer-inline-container) { 
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  
  #edit-draft-settings .options-grid .settings-checkbox-group:has(.timer-inline-container) label[for="edit-has-timer"] {
    text-align: center !important;
    justify-self: center !important;
  }
  
  #edit-draft-settings .options-grid .settings-checkbox-group:has(.timer-inline-container) .timer-inline-container {
    justify-self: center !important;
  }
  
  #edit-draft-settings .options-grid .settings-checkbox-group:has(#edit-serpentine-order) { 
    grid-column: 1 !important;
    justify-self: stretch !important;
  }

  #edit-draft-settings .salary-cap-inline-container input[type="text"] { 
    font-size: 0.95em; 
  }
  
  /* Make overlay more compact on mobile */
  .edit-settings-controls {
    max-width: 95vw;
    min-width: unset;
    padding: 16px 20px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
}

/* Position chips */
#edit-draft-settings .pos-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 700;
  margin-right: 6px;
  color: #213547;
  background: var(--medium-gray);
  vertical-align: baseline;
}
#edit-draft-settings .pos-chip.pos-F { background: var(--pos-f-bg); }
#edit-draft-settings .pos-chip.pos-D { background: var(--pos-d-bg); }
#edit-draft-settings .pos-chip.pos-G { background: var(--pos-g-bg); }

.edit-settings-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid rgba(13, 110, 253, 0.15);
  margin-top: 8px;
}

.edit-settings-save-btn,
.edit-settings-cancel-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
}

.edit-settings-overlay.show {
  animation: editSettingsSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.edit-settings-overlay.hide {
  animation: editSettingsSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes editSettingsSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes editSettingsSlideOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.95);
  }
}

/* ==========================================================================
   Edit Picks Overlay
   ========================================================================== */

.edit-picks-overlay {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-index-floating-windows);
  user-select: none;
  pointer-events: auto;
}

.edit-picks-controls {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: move;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 500px;
  min-width: 380px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: 32px;
  box-shadow:
    0 8px 32px rgba(13, 110, 253, 0.15),
    0 2px 16px rgba(0, 0, 0, 0.08);
}

.edit-picks-controls:hover {
  box-shadow: 
    0 12px 40px rgba(13, 110, 253, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.edit-picks-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  position: relative;
}

.edit-picks-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-align: center;
  flex: 1;
}

.edit-picks-close-btn {
  background: none;
  border: none;
  color: var(--text-muted-color);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.edit-picks-close-btn:hover {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger-color);
  transform: translateY(-50%) scale(1.1);
}

.edit-picks-close-btn svg {
  width: 14px;
  height: 14px;
}

.edit-picks-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.edit-picks-btn {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.08) 0%, rgba(13, 110, 253, 0.12) 100%);
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: 50%;
  color: var(--primary-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.edit-picks-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.3s ease;
}

.edit-picks-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.12) 0%, rgba(13, 110, 253, 0.18) 100%);
  border-color: rgba(13, 110, 253, 0.3);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 16px rgba(13, 110, 253, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

.edit-picks-btn:hover:not(:disabled)::before {
  left: 100%;
}

.edit-picks-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 
    0 2px 8px rgba(13, 110, 253, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.edit-picks-btn:disabled {
  background: rgba(108, 117, 125, 0.08);
  border-color: rgba(108, 117, 125, 0.2);
  color: var(--text-muted-color);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.edit-picks-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.edit-picks-btn:hover:not(:disabled) svg {
  transform: scale(1.1);
}

.edit-picks-btn#edit-undo-button {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.15) 100%);
  border-color: rgba(255, 193, 7, 0.3);
  color: #856404;
}

.edit-picks-btn#edit-undo-button:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.2) 100%);
  border-color: rgba(255, 193, 7, 0.4);
  box-shadow: 
    0 4px 16px rgba(255, 193, 7, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

.edit-picks-overlay.show {
  animation: editPicksSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.edit-picks-overlay.hide {
  animation: editPicksSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes editPicksSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes editPicksSlideOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.9);
  }
}

/* ==========================================================================
   Role Indicator
   ========================================================================== */

/* Role Indicator */
.role-indicator {
  position: fixed;
  bottom: 60px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 0.85rem;
  border: none;
  user-select: none;
  z-index: var(--z-index-floating-elements);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  cursor: default;
}

/* Tooltip pattern */
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-container .tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(13, 22, 45, 0.9);
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: var(--z-index-ui-elements);
}

.tooltip-container .tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(13, 22, 45, 0.9) transparent transparent transparent;
}

.tooltip-container:hover .tooltip,
.tooltip-container:focus-within .tooltip,
.tooltip-container.show .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Ensure the role tooltip container sits above other elements */
.role-tooltip-container {
  position: fixed;
  bottom: 60px;
  left: 24px;
  z-index: var(--z-index-floating-elements);
}

.role-indicator svg {
  flex-shrink: 0;
}

/* Role-specific colors as requested */
.role-indicator.role-spectator {
  background: linear-gradient(135deg, #9c27b0, #673ab7);
  color: var(--white);
}

.role-indicator.role-editor {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: var(--white);
}

.role-indicator.role-admin {
  background: linear-gradient(135deg, #ffc107, #ff8f00);
  color: #333;
}

.role-indicator.role-super_admin {
  background: linear-gradient(135deg, #ffc107, #ff8f00);
  color: #333;
}

/* Hover effects */
.role-indicator.role-spectator:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(156, 39, 176, 0.4);
}

.role-indicator.role-editor:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.role-indicator.role-admin:hover,
.role-indicator.role-super_admin:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

/* ==========================================================================
   Floating Chat System
   ========================================================================== */

/* Floating Chat Button (Minimized State) */
.floating-chat-button {
  position: fixed;
  bottom: 60px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-color);
  color: var(--white);
  padding: 12px 16px;
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(13, 110, 253, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: var(--z-index-floating-elements);
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  user-select: none;
}

.floating-chat-button:hover {
  background: var(--primary-hover-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}

.floating-chat-button svg {
  flex-shrink: 0;
}

/* Floating Chat Window (Maximized State) */
.floating-chat-window {
  position: fixed;
  bottom: 60px;
  right: 24px;
  width: 350px;
  height: 450px;
  min-width: 280px;
  min-height: 200px;
  max-width: 600px;
  max-height: 80vh;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  z-index: var(--z-index-floating-elements);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-color-light);
  user-select: none; /* Prevent text selection during resize */
}

/* Resize Handles */
.resize-handle {
  position: absolute;
  background: transparent;
  z-index: var(--z-index-resize-handles);
}

/* Edge handles */
.resize-handle-n {
  top: -4px;
  left: 8px;
  right: 8px;
  height: 8px;
  cursor: ns-resize;
}

.resize-handle-s {
  bottom: -4px;
  left: 8px;
  right: 8px;
  height: 8px;
  cursor: ns-resize;
}

.resize-handle-e {
  top: 8px;
  right: -4px;
  bottom: 8px;
  width: 8px;
  cursor: ew-resize;
}

.resize-handle-w {
  top: 8px;
  left: -4px;
  bottom: 8px;
  width: 8px;
  cursor: ew-resize;
}

/* Corner handles */
.resize-handle-nw {
  top: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  cursor: nw-resize;
}

.resize-handle-ne {
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  cursor: ne-resize;
}

.resize-handle-sw {
  bottom: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  cursor: sw-resize;
}

.resize-handle-se {
  bottom: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  cursor: se-resize;
}

/* Visual feedback on hover for corner handles */
.resize-handle-nw:hover,
.resize-handle-ne:hover,
.resize-handle-sw:hover,
.resize-handle-se:hover {
  background: rgba(13, 110, 253, 0.3);
  border-radius: 2px;
}

/* Disable pointer events on chat content during resize */
.floating-chat-window.resizing {
  pointer-events: none;
}

.floating-chat-window.resizing .resize-handle {
  pointer-events: auto;
}

/* Chat Header */
.floating-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--primary-color);
  color: var(--white);
  border-radius: 12px 12px 0 0;
}

.floating-chat-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.floating-chat-minimize-btn {
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-chat-minimize-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Chat Messages */
.floating-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--white);
}

.floating-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.floating-chat-messages::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.floating-chat-messages::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.floating-chat-messages::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* Chat Input Container */
.floating-chat-input-container {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--border-color-light);
  background: var(--white);
  border-radius: 0 0 12px 12px;
}

#floating-chat-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#floating-chat-input:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

#floating-chat-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.floating-chat-send-btn {
  background: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
}

.floating-chat-send-btn:hover {
  background: var(--primary-hover-color);
}

.floating-chat-send-btn:disabled {
  background: var(--medium-gray);
  cursor: not-allowed;
}

/* Chat Message Styles (reuse existing styles) */
.floating-chat-messages .chat-message {
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  position: relative;
  word-wrap: break-word;
  max-width: 85%;
}

.floating-chat-messages .chat-message.own-message {
  background-color: var(--primary-color);
  color: var(--white);
  align-self: flex-end;
  text-align: right;
  margin-left: auto;
}

.floating-chat-messages .chat-message.other-message {
  background-color: var(--light-gray);
  color: var(--text-color);
  align-self: flex-start;
  text-align: left;
  margin-right: auto;
}

.floating-chat-messages .chat-message-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  font-size: 0.8rem;
}

.floating-chat-messages .chat-message-username {
  font-weight: bold;
}

.floating-chat-messages .chat-message-username.admin {
  color: var(--success-color);
}

.floating-chat-messages .chat-message.own-message .chat-message-username.admin {
  color: #b8e6c1;
}

.floating-chat-messages .chat-message-time {
  font-size: 0.7rem;
  opacity: 0.7;
}

.floating-chat-messages .chat-message-content {
  font-size: 0.85rem;
  line-height: 1.3;
  white-space: pre-wrap;
}

.floating-chat-messages .chat-empty-state {
  text-align: center;
  color: var(--text-muted-color);
  font-style: italic;
  padding: var(--spacing-lg);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .floating-chat-window {
    width: calc(100vw - 24px);
    height: 400px;
    right: 12px;
    bottom: 57px;
    max-width: calc(100vw - 24px);
    min-width: 250px;
  }

  .floating-chat-button {
    bottom: 57px;
    right: 12px;
    padding: 10px 14px;
    font-size: 0.85rem;
  }

  .role-indicator {
    bottom: 57px;
    left: 12px;
    padding: 8px 12px;
    font-size: 0.8rem;
    gap: 6px;
  }

  /* Reduce resize handle sizes on mobile for better touch targets */
  .resize-handle-n,
  .resize-handle-s {
    height: 12px;
  }
  
  .resize-handle-e,
  .resize-handle-w {
    width: 12px;
  }
  
  .resize-handle-nw,
  .resize-handle-ne,
  .resize-handle-sw,
  .resize-handle-se {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .floating-chat-window {
    width: calc(100vw - 16px);
    height: 350px;
    right: 8px;
    bottom: 53px;
    max-width: calc(100vw - 16px);
    min-width: 220px;
  }

  .floating-chat-button {
    bottom: 53px;
    right: 8px;
  }

  .role-indicator {
    bottom: 53px;
    left: 8px;
    padding: 7px 10px;
    font-size: 0.75rem;
  }

  /* Larger touch targets for mobile */
  .resize-handle-n,
  .resize-handle-s {
    height: 16px;
  }
  
  .resize-handle-e,
  .resize-handle-w {
    width: 16px;
  }
  
  .resize-handle-nw,
  .resize-handle-ne,
  .resize-handle-sw,
  .resize-handle-se {
    width: 20px;
    height: 20px;
  }
}

/* Arrow buttons overlaying the ribbon */
.status-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color-dark);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-index-ui-elements);
  pointer-events: auto;
}

.status-scroll-btn:hover {
  background: #fff;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.status-scroll-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.status-scroll-btn--prev {
  left: calc(var(--spacing-md) + 6px);
}

.status-scroll-btn--next {
  right: calc(var(--spacing-md) + 6px);
}

/* ==========================================================================
   PRINT STYLES - Print the Draft Room As-Is with Standardized Grid Only
   ========================================================================== */

@media print {
  /* Page setup for better team card layout */
  @page {
    size: A4 landscape;
    margin: 0.4in;
  }
  
  /* Hide ONLY navigation and overlay elements - keep everything else exactly as-is */
  .landing-header,
  .draft-header,
  .draft-status-wrapper,
  .overlay,
  .floating-chat-button,
  .floating-chat-window,
  .role-indicator,
  .landing-footer,
  #loading-indicator,
  .bottom-tab-bar,
  .error-message-container,
  .status-scroll-btn,
  .floating-pill {
    display: none !important;
  }
  
  /* Hide only interactive buttons within team cards - keep all visual styling */
  .team-card__pin-button,
  .team-card__follow-button,
  .team-card__search-container input,
  .player-row__remove-btn,
  .edit-draft-controls,
  .draft-controls {
    display: none !important;
  }
  
  /* ONLY standardize the grid layout - everything else stays exactly the same */
  .teams-grid {
    /* Default: 2 columns for 2-4 teams */
    grid-template-columns: 1fr 1fr !important;
  }
  
  /* 3 columns for 5-9 teams */
  .teams-grid[data-team-count="5"],
  .teams-grid[data-team-count="6"],
  .teams-grid[data-team-count="7"],
  .teams-grid[data-team-count="8"],
  .teams-grid[data-team-count="9"] {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  
  /* 4 columns for 10+ teams */
  .teams-grid[data-team-count="10"],
  .teams-grid[data-team-count="11"],
  .teams-grid[data-team-count="12"],
  .teams-grid[data-team-count="13"],
  .teams-grid[data-team-count="14"],
  .teams-grid[data-team-count="15"],
  .teams-grid[data-team-count="16"],
  .teams-grid[data-team-count="17"],
  .teams-grid[data-team-count="18"],
  .teams-grid[data-team-count="19"],
  .teams-grid[data-team-count="20"] {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
  }
  
  /* Prevent page breaks within team cards */
  .team-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Remove hover effects for print */
  .player-row:hover {
    transform: none !important;
  }
  
  /* Make search input areas appear as text labels in print */
  .team-card__search-container {
    opacity: 0.7;
  }
  
  /* Remove animations for print */
  * {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* Print mode class for additional control - used by JavaScript to trigger print styles */

/* ==========================================================================
   DRAFT COMPLETE STATUS BAR HIDING
   ========================================================================== */

/* Hide status bar when draft is complete (both screen and print) */
.draft-status-wrapper.draft-complete-hidden {
  display: none !important;
}

/* Ensure status bar stays hidden during print when draft is complete */
@media print {
  .draft-status-wrapper.draft-complete-hidden {
    display: none !important;
    visibility: hidden !important;
  }
}