/* Align extra column lists similar to left/right lists */
#extra1-list,
#extra2-list,
#extra3-list,
#extra4-list,
#extra5-list,
#extra6-list,
#extra7-list,
#extra8-list {
  width: 100%;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wider columns specifically for index.html main chore grid */
.site-main .grid-3 {
  /* Match shop top three columns sizing */
  grid-template-columns: minmax(220px, 1fr) clamp(260px, 30vw, 560px) minmax(220px, 1fr);
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  /* Ensure grid maintains column boundaries and uses available vertical space */
  overflow: hidden;
  min-height: 80vh; /* Ensure grid has substantial height for columns to expand into */
  height: auto; /* Allow natural expansion based on content */
}

/*player columns*/
#left-list, #right-list {
  width: 100%;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* Add gaps between unassigned chore items and allow dynamic expansion */
#chores-list .card {
  margin-top: clamp(8px, 1.5vw, 16px);
  /* Base size for unassigned chore cards - will expand when manual assign buttons are present */
  min-height: 120px !important; /* Standard minimum height */
  height: auto !important;
  /* Optimize layout for manual assign buttons when present */
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px;
}

/* Special styling for unassigned chore cards that have manual assign buttons */
#chores-list .card[data-has-buttons="true"] {
  min-height: 220px !important; /* Base height for cards with buttons */
  max-height: none !important; /* Allow unlimited expansion */
  padding: 20px !important; /* Extra padding for button layout */
  /* Ensure proper spacing for multiple buttons */
  gap: 8px !important;
}

/* Medium button count (6-8 buttons) */
#chores-list .card[data-has-buttons="true"][data-button-count="medium"] {
  min-height: 300px !important;
  padding: 24px !important;
}

/* Many buttons (9-10 buttons) */
#chores-list .card[data-has-buttons="true"][data-button-count="many"] {
  min-height: 400px !important; /* Much larger for 10 player buttons */
  padding: 28px !important;
  gap: 6px !important; /* Tighter gaps for many buttons */
}

/* First unassigned chore should not have top margin */
#chores-list .card:first-child {
  margin-top: 0;
}

/* Remove padding from columns on index.html */
.site-main .grid-3 .column {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25vw;
  /* Allow columns to expand vertically to fill available space */
  height: 100%;
  min-height: 0;
}

/* Increase width of cards and elements within columns by 50% on index.html */
.site-main .grid-3 .column .card {
  width: 100%;
  align-self: center;
  text-align: center;
}


/*player title cards*/
.column-header {
  width:100%;
  margin: 0;
  padding: 6px 8px;
  font-size: 1rem;
  background: transparent;
  border-radius: 6px;
  color: var(--text);
  border: 1px dashed transparent;
  text-transform: uppercase;
}

/* Increase minimum width of headers and articles on index by 20% */
.site-main .grid-3 .column .column-header,
.site-main .grid-3 .column article.card {
  max-width: 100%;
}

/* make editable header visually clear when focused */
.column-header[contenteditable="true"]:focus {
  outline: none;
  border-color: rgba(43, 108, 176, 0.25);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.06);
}

/*point counter for players*/
.points-bank {
  background: transparent;
  border: none;
  padding: 6px;
  color: #374151;
  font-size: 0.95rem;
  text-align: right;
}

/* Set left and right padding to 5px for articles on index.html */
.site-main .grid-3 .column article.card {
  padding-left: 5px;
  padding-right: 5px;
  min-width: 0;
  /* Allow cards to shrink below default minimum */
  overflow: hidden;
  /* Prevent horizontal overflow */
}

/* Make manual assign buttons responsive within chore cards */
.card .btn {
  font-size: clamp(0.65rem, 1.2vw, 0.9rem);
  padding: clamp(3px, 0.8vw, 8px) clamp(4px, 1vw, 10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
  /* Add some margin for better spacing when multiple buttons are present */
  margin: 2px;
  /* Optimize for many player buttons */
  line-height: 1.2;
  border-radius: 4px;
}

/* More compact buttons when there are many players */
.card[data-button-count="medium"] .btn,
.card[data-button-count="many"] .btn {
  font-size: clamp(0.6rem, 1vw, 0.8rem);
  padding: clamp(2px, 0.6vw, 6px) clamp(3px, 0.8vw, 8px);
  margin: 1px;
  line-height: 1.1;
}

/* Extra compact for maximum players */
.card[data-button-count="many"] .btn {
  font-size: clamp(0.55rem, 0.9vw, 0.75rem);
  padding: clamp(2px, 0.5vw, 5px) clamp(3px, 0.7vw, 7px);
}

.site-main .grid-3 .column .points-bank {
  display: block;
  align-self: center;
  text-align: left;
  width: 100%;
}

/* Force right points bank to align with column 3 header */
#right-points-bank {
  display: block;
  text-align: right;
  align-self: center;
}

/*.j i dont see this doing anything, also no #column-left either*/
#column-right {
  grid-area: 1 / 3;
}

/* Ensure extra columns inherit sizing from original columns */
#column-extra1,
#column-extra2,
#column-extra3,
#column-extra4,
#column-extra5,
#column-extra6,
#column-extra7,
#column-extra8,
[id^="column-extra"] {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25vw;
}

/* Fix: Ensure all extra column cards match base player card styling exactly */
#column-extra1 .card,
#column-extra2 .card,
#column-extra3 .card,
#column-extra4 .card,
#column-extra5 .card,
#column-extra6 .card,
#column-extra7 .card,
#column-extra8 .card,
[id^="column-extra"] .card {
  width: 100%;
  align-self: center;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
  min-width: 0;
  overflow: hidden;
}

/*remove player hover. !important overrides all other instances*/
#remove-column-btn:not(:disabled):hover {
  background-color: #E24A4A !important;
  color: white !important;
}

/*add player hover*/
#add-column-btn:not(:disabled):hover {
  background-color: #4CAF50 !important;
  color: white !important;
}

/*style for the bottom three buttons on main page*/
#bottom-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 24px auto;
  padding: 0 20px;
}


/*the entire center column*/
#chores-column {
  justify-self: center;
  background-color: var(--header_footer);
  border: solid 25px var(--header_footer);
  border-radius: 5px;
  /* Make the column use flexbox to control internal spacing and fill available height */
  display: flex;
  flex-direction: column;
  /* Fill available vertical space dynamically */
  height: 100%; /* Fill available space in grid area */
  min-height: 0; /* Allow shrinking if needed */
  max-width: clamp(260px, 30vw, 560px); /* Match the grid column constraint */
  width: 100%;
  overflow: hidden; /* Prevent content from breaking out */
}

/*UNASSIGNED CHORES title label yellow thing*/
#chores-column h3 {
  text-align: center;
  background-color: var(--center_column);
  font-family: var(--header_font);
}

/*legit just to add a gap between the three buttons*/
#auction-btn {
  margin: 0 5px;
}

.button-container {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}

/*all of the unassigned chores container*/
#chores-list {
  width: 100%;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Fill available space within fixed-height column */
  flex: 1 1 0; /* Grow to fill available space, but column height is constrained */
  min-height: 0; /* Allow shrinking */
  overflow-y: auto; /* Add scrolling if content exceeds available space */
  overflow-x: hidden;
}

/*individual unassigned chores*/
.card {
  min-height: 120px;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 8px;
  color: #374151;
  width: 100%;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

/*Chore Name Add thing*/
.chore-form {
  background: #fff;
  border: 1px solid #e6e7eb;
  padding: 10px;
  border-radius: 8px;
  margin-top: 12px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 400px;
}

/*doesnt really do anything noticeable but it is just for good form if we do add anything to this specific element*/
.form-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/*Chore Name input typing box*/
.form-row input {
  margin-top: 0;
  width: 100%;
  max-width: 200px;
}

/* reuse .form-row layout already defined for .shop-form; ensure inputs inside chore-form match */
.chore-form input[type="text"],
.chore-form input[type="number"] {
  flex: 1;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font: inherit;
}

/* placeholder chore card stylization*/
.chore-placeholder {
  background: #fff;
  color: #6b7280;
  border-style: dashed;
}


@media (max-width: 750px) {
  /* Two-column mobile layout: players on left, unassigned chores on right */
  .site-main .grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 2vw, 16px);
    max-width: 100%;
    /* Allow grid to grow based on content */
    min-height: 85vh;
    height: auto;
  }

  /* All player columns go to left column, stacked - use !important to override inline styles */
  .column:not(#chores-column) {
    grid-column: 1 !important;
    grid-row: auto !important; /* Let grid auto-place them */
  }

  /* Right column: unassigned chores */
  #chores-column {
    grid-column: 2 !important;
    grid-row: 1 / calc(var(--total-players, 10) + 1) !important; /* Span from row 1 to number of players */
    position: static; /* Remove sticky positioning for mobile */
    border: solid 10px var(--header_footer);
    display: flex;
    flex-direction: column;
    /* Fill available vertical space on mobile */
    height: 100%; /* Fill available space in grid area */
    min-height: 0; /* Allow shrinking if needed */
    overflow: hidden; /* Prevent content from breaking out */
  }

  /* Mobile: list fills available space within fixed-height column */
  #chores-list {
    flex: 1 1 0; /* Fill available space within constrained column */
    min-height: 0; /* Allow shrinking */
    overflow-y: auto; /* Scroll within available space */
    overflow-x: hidden;
  }

  /* Scale the unassigned chores title properly */
  #chores-column h3 {
    font-size: clamp(0.7rem, 2.5vw, 1rem);
    padding: clamp(3px, 0.8vw, 6px);
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* All player columns go in the left column - ensure complete consistency */
  #column-left,
  #column-right,
  #column-extra1,
  #column-extra2,
  #column-extra3,
  #column-extra4,
  #column-extra5,
  #column-extra6,
  #column-extra7,
  #column-extra8,
  [id^="column-extra"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 12px !important;
    padding: 6px !important;
    border-radius: 6px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    /* Explicitly assign all players to left column */
    grid-column: 1 !important;
    grid-row: unset !important;
    position: static !important;
    /* Override any desktop width rules */
    box-sizing: border-box !important;
  }

  /* Ensure all player lists have identical mobile styling */
  #left-list,
  #right-list,
  #extra1-list,
  #extra2-list,
  #extra3-list,
  #extra4-list,
  #extra5-list,
  #extra6-list,
  #extra7-list,
  #extra8-list {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Ensure all chore cards in player columns have identical mobile styling */
  #column-left .card,
  #column-right .card,
  #column-extra1 .card,
  #column-extra2 .card,
  #column-extra3 .card,
  #column-extra4 .card,
  #column-extra5 .card,
  #column-extra6 .card,
  #column-extra7 .card,
  #column-extra8 .card,
  [id^="column-extra"] .card,
  #left-list .card,
  #right-list .card,
  #extra1-list .card,
  #extra2-list .card,
  #extra3-list .card,
  #extra4-list .card,
  #extra5-list .card,
  #extra6-list .card,
  #extra7-list .card,
  #extra8-list .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: clamp(6px, 1.5vw, 10px) !important;
    min-height: 60px !important;
    font-size: clamp(0.7rem, 2vw, 0.9rem) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Create a container div for all players using CSS */
  #column-left {
    order: 1;
  }
  #column-right {
    order: 2;
  }
  [id^="column-extra1"] { order: 3; }
  [id^="column-extra2"] { order: 4; }
  [id^="column-extra3"] { order: 5; }
  [id^="column-extra4"] { order: 6; }
  [id^="column-extra5"] { order: 7; }
  [id^="column-extra6"] { order: 8; }
  [id^="column-extra7"] { order: 9; }
  [id^="column-extra8"] { order: 10; }

  /* Adjust button container for mobile */
  .button-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0.3rem 0;
  }

  .button-container button {
    margin: 0;
    font-size: clamp(0.6rem, 1.8vw, 0.8rem);
    padding: clamp(4px, 1.5vw, 8px);
  }

  /* Make form more compact on mobile */
  .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  .form-row input {
    max-width: 100%;
    font-size: clamp(0.7rem, 2.5vw, 0.9rem);
    padding: clamp(4px, 1vw, 6px);
  }

  /* Adjust card sizes for mobile */
  .site-main .grid-3 .column .card {
    padding: clamp(6px, 1.5vw, 10px);
    min-height: 60px;
    font-size: clamp(0.7rem, 2vw, 0.9rem);
  }

  /* Add responsive top margin for unassigned chore items and ensure proper display */
  #chores-list .card {
    margin-top: clamp(6px, 1.5vw, 12px) !important;
    /* Base size for mobile unassigned chore cards */
    min-height: 100px !important; /* Standard mobile minimum height */
    height: auto !important;
    /* Optimize layout for manual assign buttons on mobile */
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  /* Special styling for mobile unassigned chore cards that have manual assign buttons */
  #chores-list .card[data-has-buttons="true"] {
    min-height: 200px !important; /* Base height for mobile cards with buttons */
    max-height: none !important; /* Allow unlimited expansion on mobile */
    padding: clamp(12px, 3vw, 20px) !important; /* Extra responsive padding for button layout */
    /* Ensure proper spacing for multiple buttons on mobile */
    gap: 6px !important;
  }

  /* Medium button count (6-8 buttons) on mobile */
  #chores-list .card[data-has-buttons="true"][data-button-count="medium"] {
    min-height: 280px !important;
    padding: clamp(16px, 4vw, 24px) !important;
  }

  /* Many buttons (9-10 buttons) on mobile */
  #chores-list .card[data-has-buttons="true"][data-button-count="many"] {
    min-height: 350px !important; /* Much larger for 10 player buttons on mobile */
    padding: clamp(20px, 5vw, 28px) !important;
    gap: 4px !important; /* Tighter gaps for many buttons on mobile */
  }

  /* First unassigned chore should not have top margin */
  #chores-list .card:first-child {
    margin-top: 0 !important;
  }

  /* Make bottom buttons stack on mobile */
  #bottom-buttons {
    grid-column: 1 / -1; /* Span both columns */
    flex-direction: column;
    gap: 8px;
    padding: 0 10px;
    margin: 12px auto;
  }

  #bottom-buttons button {
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    font-size: clamp(0.7rem, 2vw, 0.9rem);
  }

  /* Adjust column headers for mobile */
  .site-main .grid-3 .column .column-header {
    font-size: clamp(0.7rem, 3vw, 1rem);
    padding: clamp(3px, 0.8vw, 6px);
  }

  /* Improve points bank display on mobile */
  .points-bank {
    font-size: clamp(0.7rem, 2vw, 0.9rem);
    text-align: center !important;
    padding: clamp(2px, 0.5vw, 4px);
  }
}

  .card.chore.dragging {
    opacity: 0.5;
    transform: scale(0.97);
  }

  .drop-target {
    outline: 2px dashed var(--accent);
    background: rgba(43,108,176,0.08);
    transition: outline 0.15s ease, background 0.15s ease;
  }

/* Extra small screens - maintain two-column but with even tighter spacing */
@media (max-width: 480px) {
  .site-main .grid-3 {
    gap: 6px;
  }

  #chores-column {
    border: solid 6px var(--header_footer);
  }

  /* Further scale down the title for very small screens */
  #chores-column h3 {
    font-size: clamp(0.6rem, 3vw, 0.8rem);
    padding: 2px;
  }

  /* Even tighter spacing for player columns */
  #column-left,
  #column-right,
  [id^="column-extra"] {
    margin-bottom: 8px;
    padding: 4px;
  }

  /* Smaller cards for very small screens */
  .site-main .grid-3 .column .card {
    min-height: 50px;
    padding: 4px;
  }
}