:root {
  --main-color: #000;
  --secondary-color: #000;
}

* {
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 64px;
}
section {
  flex: 1;
}
header {
  background: linear-gradient(to right, #4f46e5, #9333ea);

  button {
    background-color: rgba(255, 255, 255, 0.2);
    transition: 0.3s all;
    i {
      color: white;
    }
  }
  button:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }
}
.rounded-dot-sm {
  width: 6px;
  height: 6px;
}
.rounded-dot {
  width: 8px;
  height: 8px;
}

main {
  background: linear-gradient(
    to bottom right,
    #f1f5f9,
    #f8fafc,
    rgba(238, 242, 255, 0.3)
  );
  .task-card {
    min-height: 500px;
    background-color: rgba(255, 255, 255, 0.6);
  }
  .card-inner {
    min-height: 398px;
  }
  .inner-task-card {
    transition: 0.2s all;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    &:hover {
      button {
        opacity: 1;
      }
      border-color: #e2e8f0 !important;
      box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
    }

    button {
      cursor: auto;
      border: none;
      transition: 0.2s all;
    }
    .edit-task-btn,
    .delete-task-btn {
      opacity: 0;
    }
    .edit-task-btn:hover {
      background-color: #eef2ff;
      color: #615fff;
    }
    .delete-task-btn:hover {
      color: #ef4444;
      background-color: #fef2f2;
    }
    .start-task-btn:hover {
      transform: scale(1.05);
      background-color: #fde68a;
    }
    .complete-task-btn:hover {
      transform: scale(1.05);
      background-color: #a7f3d0;
    }
    .todo-task-btn:hover {
      transform: scale(1.05);
      background-color: #e2e8f0;
    }
  }
}
.overlay {
  transition: 0.2s all;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.crud-modal {
  width: 512px;
  .close-btn {
    transition: 0.2s all;
    background-color: transparent;
    &:hover {
      color: #000;
      background-color: #f1f5f9;
    }
  }
  input,
  select,
  textarea,
  button {
    padding: 10px 16px;
    border-width: 3px;
  }
  ::placeholder {
    color: #94a3b8;
  }
  .cancel-task-btn,
  .submit-task-btn {
    transition: all 0.2s;
    cursor: auto;
  }
  .cancel-task-btn:hover {
    background-color: #e2e8f0;
  }
  .submit-task-btn:hover {
    background-color: oklch(45.7% 0.24 277.023);
  }
  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    box-shadow: 0 0 0 3px #6366f1;
  }
  textarea {
    resize: none;
  }
}
footer p {
  color: #94a3b8;
}
footer p i {
  color: #f43f5e;
}
.footer-gradient-bg {
  background: linear-gradient(to right, #1f2937, #0f172a);
}
.toast {
  opacity: 0;
  transform: translateY(0);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  max-width: 250px !important;
}
.toast.appear {
  opacity: 1;
}
.toast.move-down {
  transform: translateY(10px);
}

input.focus-invalid:focus {
  box-shadow: 0 0 0 2px red;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s infinite;
}