.container {
  font-size: 18px;
  font-family: sans-serif;
  display: grid;
  grid-gap: 4px;
  background-color: #ddd;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: none;
}


[class^='grid-content'] {
  overflow-y: scroll;
  position:relative;

  outline: 1px #f90 dashed;
  display: auto;
  background-color: goldenrod;
  align-items: center;
  justify-content: center;
  grid-template-rows: auto 1fr;
  grid-row: span 10;

  scrollbar-width: none; /* hide the scrollbar of the scrollable element */
}

.grid-title {
  position: relative;

  font-size: 20px;
  height: 12px;
}


.dragcontainer {
  margin: 40px;
  font-size: 21px;
  font-family: sans-serif;
  display: grid;
  grid-gap: 22px;
  background-color: #aaa;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: none;

  border: 5px solid blue

}
.grid-drag{
  height: 12px
  border: inherit

}

/* Create a custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}



.stacked {
  display: grid;
}
.stacked >* {
  grid-column: 1 /2;
  grid-row: 1/2;
}


.parent {
    display: contents;
}


.item-title {
  background-color: #ddd;
  padding: 1px;
  grid-area: 1 / 1 / 2 / -1;
}

.item-content {
  grid-area: 2 / 1 / 3 / -1;
}

/* --- Added for DB-backed roster/schedule + auth --- */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  font-family: sans-serif;
}

.chip-remove {
  margin-left: 6px;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: bold;
}

#add-person-form {
  margin: 16px 40px;
  font-family: sans-serif;
}

#add-person-form input {
  padding: 4px 8px;
  margin-right: 8px;
}

.auth-container {
  max-width: 360px;
  margin: 80px auto;
  padding: 24px;
  font-family: sans-serif;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.auth-container label {
  display: block;
  margin-top: 12px;
  margin-bottom: 4px;
}

.auth-container input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
}

.auth-container button {
  margin-top: 16px;
  padding: 8px 16px;
}

.form-error {
  color: #b00020;
  min-height: 1.2em;
}