* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f7f3ef;
  color: #292523;
}

/* Hele appen */

.todo-app {
  width: 90%;
  max-width: 1100px;
  margin: 55px auto;
}

/* Overskrift */

.todo-header {
  text-align: center;
  margin-bottom: 40px;
}

.todo-header h1 {
  margin: 0;
  font-size: 48px;
  color: #704634;
}

.todo-header p {
  margin-top: 8px;
  font-size: 18px;
  color: #77706c;
}

/* Formular */

.create-box {
  display: grid;
  grid-template-columns: 2fr 1fr 0.9fr 1fr;
  align-items: end;
  gap: 25px;
  margin-bottom: 30px;
  padding: 25px;
  background-color: #ffffff;
  border: 1px solid #e4ddd7;
  border-radius: 12px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-group label,
.outdoor-group p {
  font-size: 16px;
  font-weight: 600;
}

/* Tekst- og datofelt */

.task-text,
.task-date {
  width: 100%;
  padding: 14px 15px;
  font-family: inherit;
  font-size: 16px;
  background-color: white;
  border: 1px solid #d5cfca;
  border-radius: 8px;
}

.task-text:focus,
.task-date:focus {
  outline: none;
  border-color: #a66d52;
}

.task-date {
  cursor: pointer;
}

/* Lokation */

.location-text {
  font-size: 14px;
  color: #555;
}

.task-location {
  width: 100%;
  height: 48px;
  padding: 0 30px 0 10px;
  font-size: 16px;
  font-family: inherit;
  background-color: white;
  border: 1px solid #d8d2ce;
  border-radius: 8px;

  cursor: pointer;
}

/* Udendørs */

.outdoor-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.outdoor-group p {
  margin: 0;
}

.outdoor-group label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-outdoor {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Create Task-knap */

.create-task {
  height: 48px;

  font-size: 16px;
  font-weight: 600;
  color: white;

  background-color: #a66d52;
  border: none;
  border-radius: 8px;

  cursor: pointer;
}

.create-task:hover {
  background-color: #89543e;
}

/* To-do og Færdig */

.lists {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 25px;
}

.todo-box,
.done-box {
  min-height: 350px;
  padding: 25px;

  border: 1px solid #e4ddd7;
  border-radius: 12px;
}

.todo-box {
  background-color: #fffaf6;
}

.done-box {
  background-color: #eff7e0;
}

.todo-box h2,
.done-box h2 {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 28px;
}

/* Lister */

.tasks,
.done-tasks {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Task-kort */

.tasks li,
.done-tasks li {
  display: grid;
  align-items: center;
  gap: 16px;

  margin-bottom: 12px;
  padding: 16px 18px;

  background-color: white;
  border: 1px solid #e6e0dc;
  border-radius: 10px;
}

/* ○ | information | vejr | slet */

.tasks li {
  grid-template-columns: auto 1fr 150px auto;
}

.tasks li .delete-btn {
  grid-column: 4;
}

/* information | vejr | knapper */

.done-tasks li {
  grid-template-columns: 1fr 130px 140px;
}

/* Sørger for at vejret altid står i samme kolonne */
.done-tasks li .weather-box {
  grid-column: 2;
  justify-self: start;
  transform: translateX(30px);
}

/* Sørger for at Fortryd og skraldespand altid står samme sted */
.done-tasks li .task-actions {
  grid-column: 3;
  justify-self: end;
}

/* Task-information */

.task-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.task-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.task-date-text {
  font-size: 14px;
  color: #555;
}

.outdoor-text {
  font-size: 14px;
  color: #52705a;
}

/* Færdige opgaver */

.done-tasks .task-title {
  color: #777;
  text-decoration: line-through;
}

/* Vejr */

.weather-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 150px;
}

.weather-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.weather-icon {
  font-size: 20px;
}

.weather-top strong {
  font-size: 16px;
}

.weather-description {
  margin-top: 3px;
  font-size: 13px;
  color: #555;
}

/* Dårligt vejr */

.weather-warning {
  width: 150px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #a34a3a;
}

/* Forecast findes ikke endnu */

.weather-unavailable {
  max-width: 140px;
  font-size: 12px;
  line-height: 1.3;
  color: #77706c;
}

/* Fejl ved hentning af vejr */

.weather-error {
  max-width: 140px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #a34a3a;
}

/* Marker som færdig */

.done-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  background-color: transparent;
  border: 2px solid #777;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.2s;
}

.done-btn:hover {
  background-color: #f3e8e2;
  border-color: #a66d52;
  transform: scale(1.1);
}

/* Deaktiveret ved dårligt vejr */

.done-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  background-color: #eee;
  border-color: #aaa;
}

.done-btn:disabled:hover {
  transform: none;
  background-color: #eee;
  border-color: #aaa;
}

/* Knapper på færdige opgaver */

.task-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

/* Fortryd */

.undo-btn {
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  color: #292523;
  background-color: white;
  border: 1px solid #d5cfca;
  border-radius: 8px;
  cursor: pointer;
}

.undo-btn:hover {
  background-color: #f7f3ef;
  border-color: #a66d52;
}

/* Slet */

.delete-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #555;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}

.delete-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delete-btn:hover {
  color: #a66d52;
  transform: scale(1.1);
}

/* Konfetti */

.konfetti {
  position: fixed;
  top: -30px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  animation-name: fald;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes fald {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(0deg);
  }

  8% {
    opacity: 1;
  }

  30% {
    opacity: 1;
    transform: translateX(calc(var(--drift) * 0.3)) translateY(30vh)
      rotate(180deg);
  }

  60% {
    opacity: 1;
    transform: translateX(calc(var(--drift) * -0.2)) translateY(65vh)
      rotate(400deg);
  }

  80% {
    opacity: 1;
    transform: translateX(calc(var(--drift) * 0.7)) translateY(90vh)
      rotate(600deg);
  }

  90% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    transform: translateX(var(--drift)) translateY(110vh) rotate(800deg);
  }
}

/* Mobil */

@media (max-width: 800px) {
  .todo-app {
    width: 94%;
    margin-top: 30px;
  }

  .todo-header h1 {
    font-size: 36px;
  }

  .create-box {
    grid-template-columns: 1fr;
  }

  .lists {
    grid-template-columns: 1fr;
  }

  /* To-do */
  .tasks li {
    grid-template-columns: auto 1fr 150px auto;
  }

  .tasks li .weather-box {
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    align-items: center;
    text-align: center;
  }

  .tasks li .delete-btn {
    grid-column: 4;
    grid-row: 1;
  }

  /* Færdig */
  .done-tasks li {
    grid-template-columns: 1fr 1fr auto;
  }

  .done-tasks li .weather-box {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    justify-self: center;
    align-items: center;
    text-align: center;
    transform: none;
  }

  .done-tasks li .task-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}