/*generic*/

#board {
  display: grid;
  grid-auto-columns: 150px;
  grid-auto-flow: column;
  height: 60vh;
  overflow: auto;
}

input#iteration-length{
  width: 5em;
}

.board-column {
  background: #EBECF0;
  padding: 10px;
}

.board-column h2 {
  font-size: 16px;
  margin: 0 0 12px 0;
  height: 2em;
  text-align: center;
}

.board-column h4 {
  height: 1em;
  font-size: 1em;
  color: darkgrey;
  text-align: center;
  width: 100%;
}

.board-column.todo-column {
  border-left: 1px solid black;
}
.board-column.work-column {
  border-left: 1px solid black;
}
.board-column.wait-column {
  border-left: 1px dashed grey;
}
.board-column.test-column {
  border-left: 1px solid black;
}
.board-column.done-column,
.board-column.fail-column{
  border-left: 1px solid black;
  border-right: 1px solid black;
  height: 50%;
  overflow: hidden;
}
.board-column.fail-column h4 {
  height: 0;
}
.last-column {
  padding-left: 0px;
}

.postit .previous-puzzles{
  visibility: hidden;
}
.postit .question-container {
  visibility: hidden;
}

.postit .answer {
  position: absolute;
  right: 10px;
  width: 60px;
}
.postit .move-button {
  visibility: hidden;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.postit .reject-button {
  visibility: hidden;
  position: absolute;
  left: 10px;
  bottom: 10px;
}

.todo-column .postit:nth-child(4n+1),
.wait-column .postit:nth-child(4n+1),
.fail-column .postit:nth-child(4n+1),
.done-column .postit:nth-child(4n+1){
  z-index: 10;
}
.todo-column .postit:nth-child(4n+2),
.wait-column .postit:nth-child(4n+2),
.fail-column .postit:nth-child(4n+2),
.done-column .postit:nth-child(4n+2){
  transform: rotate(1deg);
  margin-top: -85px;
  z-index: 9;
}
.todo-column .postit:nth-child(4n+3),
.wait-column .postit:nth-child(4n+3),
.fail-column .postit:nth-child(4n+3),
.done-column .postit:nth-child(4n+3){
  transform: rotate(2deg);
  margin-top: -85px;
  z-index: 8;
}
.todo-column .postit:nth-child(4n+4),
.wait-column .postit:nth-child(4n+4),
.fail-column .postit:nth-child(4n+4),
.done-column .postit:nth-child(4n+4){
  transform: rotate(3deg);
  margin-top: -85px;
  z-index: 7;
}

/*work pages*/
#work-container {
  display: grid;
  grid-template-columns: auto;
  grid-auto-flow: column;
  height: 60vh;
  overflow: auto;
}

.board-column.work-column h4:before{
  content: 'ongoing';
}
.board-column.wait-column h4:before{
  content: 'done';
}

.postit {
  position: relative;
  background: #feff9c;
  box-shadow: 1px 1px 2px 1px rgba(9, 30, 66, .25);
  border-radius: 3px;
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;

  /* undo bootstrap reboot */
  box-sizing: content-box;
}

#inbox .postit .move-button {
  visibility: visible;
}
#inbox .postit .move-button:before {
  content: 'Start';
}

#workspace {
  width: 300px;
}
#workspace .postit,
#testspace .postit{
  width: 180px;
  height: 180px;
}
#workspace .question-container {
  visibility: visible;
}
#workspace .move-button {
  visibility: visible;
}
#workspace .move-button:before {
  content: 'OK'
}

/*Test-space*/
#testspace .previous-puzzles {
  visibility: visible;
}
#testspace .move-button {
  visibility: visible;
}
#testspace .move-button:before {
  content: 'Accept ✅'
}
#testspace .reject-button {
  visibility: visible;
}
#testspace .reject-button:before {
  content: 'Reject ❌'
}

/*charts*/
.chart-container {
  width: 400px;
  height: 318px;
  position: relative;
}

/*stats*/
.iteration-stats {
  border-collapse: collapse;
}
.iteration-stats th,
.iteration-stats td{
  border: 1px solid grey;
  padding: 0.5rem;
}

#iterations-stats-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(50px, max-content);
}
.iteration div {
  text-align: right;
  padding: 0 10px;
}
.iteration .iteration-name {
  font-weight: bold;
}
.success {
  border-color: rgb(75, 192, 192);
  background-color: rgba(75, 192, 192, 0.1);
}
.wip {
  border-color: rgb(255, 205, 86);
  background-color: rgba(255, 205, 86, 0.1);
}
.throughput {
  border-color: rgb(54, 162, 235);
  background-color: rgba(54, 162, 235, 0.1);
}
.lead-time {
  border-color: rgb(255, 99, 132);
  background-color: rgba(255, 99, 132, 0.1);
}